Bootstrap Строка Layout Layout, когда другой ряд добавлен ниже - PullRequest
Новая
       38

Bootstrap Строка Layout Layout, когда другой ряд добавлен ниже

0 голосов
/ 28 января 2020

Итак, в моем макете я предполагаю, что у меня будет 3-карточный контейнер подряд и ниже 3-х таблиц таблицы подряд. Макет имеет левую боковую панель. Теперь 3 контейнера для карт расположены правильно, однако, когда я добавляю таблицу ниже во 2-й строке, содержимое каждой карты занимает всю ширину макета и складывается один за другим. Так что с col-lg это выглядит хорошо, выравнивая бок о бок в одном ряду, но складывается, когда добавляется другой ряд. 

<div class="row">
   <div class="col-lg ">
    <div class="card" >   
        <div class="card-body">
            <h5 class="card-title">Chart</h5>
            <p class="card-text">Contents</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div> 
    </div>
      <div class="col-lg ">
    <div class="card" >   
        <div class="card-body">
            <h5 class="card-title">Chart</h5>
            <p class="card-text">Contents</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div> 
    </div>
      <div class="col-lg ">
    <div class="card" >   
        <div class="card-body">
            <h5 class="card-title">Chart</h5>
            <p class="card-text">Contents</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div> 
    </div>


<div class="row">
<div class=" col-lg">   
    <div class="card">
        <div class="card-body">
           Table content
         </div>
    </div>
</div> 
<div class=" col-lg">   
    <div class="card">
        <div class="card-body">
             Table content
         </div>
    </div>
</div> 
<div class=" col-lg">   
    <div class="card">
        <div class="card-body">
            Table content
         </div>
    </div>
</div> 
</div>
...