Chcę, aby moje dwa Divowie były wyrównane bez względu na wszystko, co (dolne dwa), ponieważ kiedyś w lewym div, obraz może być w środku z różną wielkością, a po prawej stronie znajduje się textlai, z różnym tekstem. . Zrobiłem małą sztuczkę, gdzie umieściłem min-heigth na obu, ale czuję się źle. Zrobiłem to na JSFiddle, aby zobaczyć:

https://jsfiddle.net/532CMWLB/

Oto mój oryginalny kod:

<div class="col-sm-6">
    <div class="alert alert-light border clearfix" role="alert">
        Modification de la photo - Taille de l'image : 592 * 398 pixels
    </div>

    <div class="bg-white border p-4 justify-content-center text-center">
        <form method="post" enctype="multipart/form-data">
            <div class="d-flex justify-content-center">
                <div class="text-center" style="max-width:300px">

                    <?php $thumb = (!empty($biopic)) ? $biopic : 'https://via.placeholder.com/880x300&amp;text=592x398'; ?>
                    <a href="<?=$thumb;?>" id="biopic_preview" data-toggle="lightbox" data-gallery="biography" data-type="image">
                        <img src="<?=$thumb;?>" class="img-fluid" title="biopic">
                    </a>

                    <button type="button" name="biopic_preview" id="biopic_preview" class="btn btn-outline-first btn-sm awmedias mt-3" data-width="398" data-height="592">
                        <i class="far fa-image fa-fw"></i> Choisir un fichier
                    </button>

                </div>
            </div>
            <button type="submit" name="biopic_post" value="biopic_post" class="btn btn-first btn-sm mt-3">Valider</button>
        </form>
    </div>
</div>


<div class="col-sm-6">
    <div class="alert alert-light mt-4 mt-md-0 border clearfix" role="alert">
        Modification du texte de présentation - Longueur comprise entre 100 et 1000 caractères
    </div>

    <div class="bg-white border p-4 justify-content-center text-center" style="min-height:590px !important;">
        <form method="post">
            <div class="d-flex justify-content-center">

                <?php $myText = $bioText ?? ''?>
                <textarea name="bio_text" id="bio_text" cols="50" rows="18"><?=$myText?></textarea>

            </div>
            <button type="submit" name="text_post" class="btn btn-first btn-sm mt-3">Valider</button>
        </form>
    </div>
</div>

----------- Korekta, którą użyłem ------------

<div class="container-fluid pt-3 pb-3">
  <div class="row">

    <div class="col-sm-6 order-sm-1 mb-3">

      <div class="alert alert-light border h-100" role="alert">
        Modification de la photo - Taille de l'image : 592 * 398 pixels
      </div>

    </div>

    <div class="col-sm-6 order-sm-3 mb-3">

      <div class="bg-white border p-4 justify-content-center text-center h-100">
        <form method="post" enctype="multipart/form-data">
          <div class="d-flex justify-content-center">
            <div class="text-center" style="max-width:300px">

              <a href="#" id="biopic_preview" data-toggle="lightbox" data-gallery="biography" data-type="image">
                <img src="somePIC" class="img-fluid" title="biopic">
              </a>

              <button type="button" name="biopic_preview" id="biopic_preview_btn" class="btn btn-outline-first btn-sm awmedias mt-3" data-width="398">
                    <i class="far fa-image fa-fw"></i> Choisir un fichier
                  </button>

            </div>
          </div>
          <button type="submit" name="biopic_post" value="biopic_post" class="btn btn-first btn-sm mt-3">Valider</button>
        </form>
      </div>

    </div>

    <div class="col-sm-6 order-sm-2 mb-3">

      <div class="alert alert-light border h-100" role="alert">
        Modification du texte de présentation - Longueur comprise entre 100 et 1000 caractères
      </div>

    </div>

    <div class="col-sm-6 order-sm-4 mb-3">

      <div class="bg-white border p-4 justify-content-center text-center h-100" style="min-height:590px !important;">
        <form method="post">
          <div class="d-flex justify-content-center">

            <textarea name="bio_text" id="bio_text" cols="50" rows="18">SOME TEXT</textarea>

          </div>
          <button type="submit" name="text_post" class="btn btn-first btn-sm mt-3">Valider</button>
        </form>
      </div>

    </div>

  </div>

</div>

(Używam HTML5, z bootstrap 4)

0
Shogu23 24 październik 2020, 22:31

1 odpowiedź

Najlepsza odpowiedź

W zależności od tego, jak dynamiczna jest układ (tego) układu wiersza, można owinąć każdy element w klasie kolumn w ramach tego układu wiersza. Co sprawia, że każda kolumna div równa wysokości w obecnym wierszu flexa.

Dostarczany układ kodu Zamówienie domyślne jest następujące ...

  1. alert 1 Domyślnie order-1
  2. biopic_post Domyślnie order-2
  3. alert 2 Domyślnie order-3
  4. text_post Domyślnie order-4

Który domyślnie będzie wyglądał taki przykład poniżej, gdy owijasz każdy w klasie kolumn ...

https://jsfiddle.net/joshmoto/qw7eto3j/

<div class="container-fluid pt-3 pb-3">
  <div class="row">

    <div class="col-6 mb-3">

      <div class="alert alert-light border h-100" role="alert">
        Modification de la photo - Taille de l'image : 592 * 398 pixels
      </div>

    </div>

    <div class="col-6 mb-3">

      <div class="bg-white border p-4 justify-content-center text-center h-100">
        <form method="post" enctype="multipart/form-data">
          <div class="d-flex justify-content-center">
            <div class="text-center" style="max-width:300px">

              <a href="#" id="biopic_preview" data-toggle="lightbox" data-gallery="biography" data-type="image">
                <img src="somePIC" class="img-fluid" title="biopic">
              </a>

              <button type="button" name="biopic_preview" id="biopic_preview_btn" class="btn btn-outline-first btn-sm awmedias mt-3" data-width="398">
                    <i class="far fa-image fa-fw"></i> Choisir un fichier
                  </button>

            </div>
          </div>
          <button type="submit" name="biopic_post" value="biopic_post" class="btn btn-first btn-sm mt-3">Valider</button>
        </form>
      </div>

    </div>

    <div class="col-6 mb-3">

      <div class="alert alert-light border h-100" role="alert">
        Modification du texte de présentation - Longueur comprise entre 100 et 1000 caractères
      </div>

    </div>

    <div class="col-6 mb-3">

      <div class="bg-white border p-4 justify-content-center text-center h-100" style="min-height:590px !important;">
        <form method="post">
          <div class="d-flex justify-content-center">

            <textarea name="bio_text" id="bio_text" cols="50" rows="18">SOME TEXT</textarea>

          </div>
          <button type="submit" name="text_post" class="btn btn-first btn-sm mt-3">Valider</button>
        </form>
      </div>

    </div>

  </div>

</div>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />

Ale tutaj jest fajny bit, którego można użyć COOTStrap {X0}} Reorganizuj ponownie te div w bieżącym wierszu.

https://getbootstrap.com/docs/4.5/layout/grid/#reordering.

W tym przykładzie poniżej ponownie zamówiłem kolumnę div w tej strukturze ...

  1. alert 1 jest teraz ustawiony na .order-sm-1
  2. biopic_post jest teraz ustawiony na .order-sm-3
  3. alert 2 jest teraz ustawiony na .order-sm-2
  4. text_post jest teraz ustawiony na .order-sm-4

Więc gdy rozmiar ekranu sm i powyżej, zostaną użyte te zamówienia.

W tym demo poniżej usunięłem -sm ze wszystkich klas .col- i .order-, dzięki czemu wielkości zamawiania i kolumn będzie działać w stackoverflow Live Demo.

https://jsfiddle.net/joshmoto/EJA0G4KH/1/

<div class="container-fluid pt-3 pb-3">
  <div class="row">

    <div class="col-6 order-1 mb-3">

      <div class="alert alert-light border h-100" role="alert">
        Modification de la photo - Taille de l'image : 592 * 398 pixels
      </div>

    </div>

    <div class="col-6 order-3 mb-3">

      <div class="bg-white border p-4 justify-content-center text-center h-100">
        <form method="post" enctype="multipart/form-data">
          <div class="d-flex justify-content-center">
            <div class="text-center" style="max-width:300px">

              <a href="#" id="biopic_preview" data-toggle="lightbox" data-gallery="biography" data-type="image">
                <img src="somePIC" class="img-fluid" title="biopic">
              </a>

              <button type="button" name="biopic_preview" id="biopic_preview_btn" class="btn btn-outline-first btn-sm awmedias mt-3" data-width="398">
                    <i class="far fa-image fa-fw"></i> Choisir un fichier
                  </button>

            </div>
          </div>
          <button type="submit" name="biopic_post" value="biopic_post" class="btn btn-first btn-sm mt-3">Valider</button>
        </form>
      </div>

    </div>

    <div class="col-6 order-2 mb-3">

      <div class="alert alert-light border h-100" role="alert">
        Modification du texte de présentation - Longueur comprise entre 100 et 1000 caractères
      </div>

    </div>

    <div class="col-6 order-4 mb-3">

      <div class="bg-white border p-4 justify-content-center text-center h-100" style="min-height:590px !important;">
        <form method="post">
          <div class="d-flex justify-content-center">

            <textarea name="bio_text" id="bio_text" cols="50" rows="18">SOME TEXT</textarea>

          </div>
          <button type="submit" name="text_post" class="btn btn-first btn-sm mt-3">Valider</button>
        </form>
      </div>

    </div>

  </div>

</div>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

Oto skrzypce z oryginalnymi reagującymi klasami przerwania z tym samym zastosowanym na zajęciach.

https://jsfiddle.net/joshmoto/6ZPU93TN/

Sprawdź to, aby zobaczyć zmianę z xs do sm szerokość okna.

2
joshmoto 25 październik 2020, 03:02