Как обернуть (float) карты в bootstrap 4

Я использую bootstrap 4 beta.Как обернуть (float) карты в bootstrap 4

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

Количество карточек может быть от 1 до n.

Эффект, который я хочу, заключается в том, что карты должны быть выложены слева направо, пока не исчезнет экранное пространство, а затем заверните на следующую строку.

Я пробовал все различные варианты, перечисленные на странице примера загрузки bootstrap 4, но они, похоже, не обертываются.

Как я могу это достичь?

Приведенный ниже пример показывает их 3 поперек, с большим пространством между ними.

<div class="card-columns"> 

     <div class="card" style="width: 18rem;"> 
      <img class="card-img-top" data-src="..." alt="Card image cap"> 
      <div class="card-block"> 
       <h4 class="card-title">Card title</h4> 
       <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> 
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> 
      </div> 
     </div> 
     <div class="card"style="width: 18rem;"> 
      <img class="card-img-top" data-src="..." alt="Card image cap"> 
      <div class="card-block"> 
       <h4 class="card-title">Card title</h4> 
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> 
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> 
      </div> 
     </div> 
     <div class="card" style="width: 18rem;"> 
      <img class="card-img-top" data-src="..." alt="Card image cap"> 
      <div class="card-block"> 
       <h4 class="card-title">Card title</h4> 
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> 
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> 
      </div> 
     </div> 
     <div class="card" style="width: 18rem;"> 
      <img class="card-img-top" data-src="..." alt="Card image cap"> 
      <div class="card-block"> 
       <h4 class="card-title">Card title</h4> 
       <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> 
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> 
      </div> 
     </div> 
     <div class="card" style="width: 18rem;"> 
      <img class="card-img-top" data-src="..." alt="Card image cap"> 
      <div class="card-block"> 
       <h4 class="card-title">Card title</h4> 
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> 
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> 
      </div> 
     </div> 
     <div class="card" style="width: 18rem;"> 
      <img class="card-img-top" data-src="..." alt="Card image cap"> 
      <div class="card-block"> 
       <h4 class="card-title">Card title</h4> 
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> 
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> 
      </div> 
     </div> 
    </div>

источник

2016-07-12 Greg Gum

Пожалуйста, поделитесь своим кодом? –

После работы с этим в течение некоторого времени, плавающее решение, которое я придумал с неудовлетворительным, так как в некоторых случаях на некоторых картах было много места. После просмотра загрузочных 4-карточек я обнаружил функцию, которая делает именно то, что я хотел: «карточные столбцы»

Он выстраивает карты в три столбца и перенастраивается на один столбец при небольшом размере экрана.

Bootstrap Docs on card-columns

источник

2016-07-24 14:17:10

Спасибо, помощник. Ты спас мне большую часть времени. – MartinJH

Единственная проблема, с которой я столкнулся с карточными колонками, - это порядок. Если у вас 15 карт в 3 столбцах, карты вверху страницы будут чем-то вроде карты 1, карты 6 и карты 11. Не здорово! –

-1

Здесь решение ... использование начальной загрузки строки и столбец, чтобы достигнуть этого, пожалуйста, следуйте ниже кода.

<div class="row"> 
<div class="col-lg-4 col-md-3 col-sm-6"> 
    <div class="card"> 
     <img class="card-img-top" data-src="..." alt="Card image cap"> 
     <div class="card-block"> 
     <h4 class="card-title">Card title</h4> 
     <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> 
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> 
     </div> 
    </div> 
</div> 
</div>

источник

2016-07-12 05:42:12

Я пробовал это, и он помещает их в одну горизонтальную колонку. –

Удалить ширину с 'card' div и разметки в строке и col's –

я придумал с классом плавающей карты, которая работает: использование

<style> 
    .floating-card { 
     float: left; 
     margin: 5px; 
     max-width: 300px; 

    } 
</style>

Пример:

<div class="floating-card sortable"> 
    <section class="box-typical task-card task"> 
     <div class="task-card-photo"> 
      <img src="img/img-task.jpg" alt=""> 
     </div> 
     <div class="task-card-in"> 
      <div class="btn-group task-card-menu"> 
       <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
        <i class="font-icon-dots-vert-square"></i> 
       </button> 
       <div class="dropdown-menu dropdown-menu-right"> 
        <a class="dropdown-item" href="#"><i class="font-icon font-icon-pencil"></i>Edit</a> 
        <a class="dropdown-item" href="#"><i class="font-icon font-icon-archive"></i>Archive</a> 
        <a class="dropdown-item" href="#"><i class="font-icon font-icon-trash"></i>Delete</a> 
       </div> 
      </div> 
      <div class="task-card-title"> 
       <a href="#">Create new webpage for sales and marketing stuff</a> 
       <span class="task-card-title-label">(BIG)</span> 
      </div> 
      <div class="progress-compact-style"> 
       <progress class="progress" value="25" max="100"> 
        <div class="progress"> 
         <span class="progress-bar" style="width: 25%;">25%</span> 
        </div> 
       </progress> 
       <div class="progress-compact-style-label">37% done</div> 
      </div> 
      <div class="task-card-tags"> 
       <a href="#" class="label label-light-grey">Default</a> 
       <a href="#" class="label label-light-grey">Primary</a> 
       <a href="#" class="label label-light-grey">Success</a> 
      </div> 
     </div> 
     <div class="task-card-footer"> 
      <div class="task-card-meta-item"><i class="font-icon font-icon-comments-2"></i>10</div> 
      <div class="task-card-meta-item"><i class="font-icon font-icon-clip"></i>24</div> 
      <div class="avatar-preview avatar-preview-32"> 
       <a href="#"> 
        <img src="img/photo-64-2.jpg" alt=""> 
       </a> 
      </div> 
     </div> 
    </section><!--.task-card--> 
</div>

источник

2016-07-12 05:59:40

ответ

Смежные вопросы