Поместите три столбца с одинаковой высотой - PullRequest
Новая
       5

Поместите три столбца с одинаковой высотой

1 голос
/ 19 февраля 2020

Используя bootstrap, я создал три столбца. В каждом столбце у меня есть несколько строк.

Моя проблема в том, что столбцы имеют разную высоту, левый столбец больше остальных, они должны были быть одинаковой высоты.

В карточках я не определял высоту, то есть, если бы какой-либо из столбцов увеличивал высоту, остальные автоматически следовали бы за этим ростом, чтобы иметь одинаковую высоту.

Есть ли способ разместить все столбцы на одной высоте без использования измерений в пикселях (px)?

Спасибо 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />


<div class="col-3">
  <div class="row">
    <div class="col" style="padding-right:0">
      <div class="card cardm">
        <div class="card-body" style="overflow-y: auto;">
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col" style="padding-right:0">
      <div class="card cardm">
        <div class="card-body">
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col">
  <div class="row">
    <div class="col">
      <div class="card cardm">
        <div class="card-body">

        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="card cardm">
        <div class="card-body">

        </div>
      </div>
    </div>
  </div>

Ответы [ 2 ]

0 голосов
/ 20 февраля 2020

Если вы используете Bootstrap4, то вы можете легко achieve by BS4 predefined classes, как h-100, а также ваша структура html неверна, поэтому следуйте инструкциям bootstrap.

Predefined classes for width & height follow: https://getbootstrap.com/docs/4.3/utilities/sizing/#relative для родителей 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container my-2">
  <div class="row">
    <div class="col-3">
      <div class="card cardm h-100">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="card cardm h-100">
        <div class="card-body">
          Ut enim ad minim veniam, quis nostrud exercitation ullamco.
        </div>
      </div>
    </div>
  	<div class="col-3">
      <div class="card cardm h-100">
        <div class="card-body">
          Laboris nisi ut aliquip ex ea
        </div>
      </div>
    </div>
  	<div class="col-3">
      <div class="card cardm h-100">
        <div class="card-body">
          Voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        </div>
      </div>
    </div>
  </div>
</div>
0 голосов
/ 19 февраля 2020

Готово с js, только что скопировано из дублированного связанного поста. Хотя на маленьком экране странно. 

// Get cards
var cards = $('.card');
var maxHeight = 0;

// Loop all cards and check height, if bigger than max then save it
for (var i = 0; i < cards.length; i++) {
  if (maxHeight < $(cards[i]).outerHeight()) {
    maxHeight = $(cards[i]).outerHeight();
  }
}
// Set ALL card bodies to this height
for (var i = 0; i < cards.length; i++) {
  $(cards[i]).height(maxHeight);
}
.mycontainer {
    width: 96%;
    margin-top: 148px;
    margin-right: auto;
    margin-left: auto;
}

.card{
    width:100%;
    margin-top:15px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 20px #BCBCCB47;
    border-radius: 8px;
    border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width: 100%;height: 100%; overflow-y: auto; overflow-x: hidden;">
    <div class="row mycontainer">
      <div class="col">
        <div class="row">
          <div class="card">
            <div class="card-body" style="padding: 8px;">
            
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="row">
              <div class="card">
                <div class="card-body">
                
                </div>
              </div>
            </div>
            <div class="row">
              <div class="card">
                <div class="card-body">
               
            
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="row h-100">
              <div class="card" style="margin-left:15px">
                <div class="card-body">
               
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="row h-100">
              <div class="card" style="margin-left:15px">
                <div class="card-body">
           
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="row">
          <div class="col">
            <div class="row h-100">
              <div class="card">
                <div class="card-body">
         
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="row h-100">
              <div class="card" style="margin-left:15px">
                <div class="card-body">
           
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="row">
              <div class="col" style="padding-right:0">
                <div class="card cardm">
                  <div class="card-body">
                 
                  </div>
                </div>
              </div>
              <div class="col" style="padding-right:0">
                <div class="card cardm">
                  <div class="card-body">
                
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col" style="padding-right:0">
                <div class="card cardm">
                  <div class="card-body">
                 
                  </div>
                </div>
              </div>
              <div class="col" style="padding-right:0">
                <div class="card cardm">
                  <div class="card-body">
                 
                  </div>
                </div>
              </div>
            </div>
          </div>


        </div>
        <div class="row">
          <div class="col">
            <div class="row h-100">
              <div class="card">
                <div class="card-body" style="padding: 16px;">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-3">
        <div class="row">
          <div class="col" style="padding-right:0">
            <div class="card cardm">
              <div class="card-body" style="overflow-y: auto;">
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col" style="padding-right:0">
            <div class="card cardm">
              <div class="card-body">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="row">
          <div class="col">
            <div class="card cardm">
              <div class="card-body">
             
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="card cardm">
              <div class="card-body">
           
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
...