Question

我正在创建一个在线商店。我需要每行3个项目，剩下一些空间。所以我的想法是一个9列，有3个子列。然后我从9中剩下3列，用于我选择的其他方式。

我的问题是在几个类别中，我有4/5项。所以他们都出现在1行。我该怎么解决这个问题。

<div class="container">
    <div class="row">
      <div class="col-md-9">
        <div class="row">
          @foreach ($items as $item)
            <div class="col-md-3">
                <img class="list-image" src="{{$item->image}}">
            </div>
          @endforeach
        </div>
      </div>
    </div>
  </div>

Answer 1

您不必使用所有12列。 12列只是可用的最大值。当您不使用所有12个可用列时，有多种方法可以实现列之间所需的间距。

其中两个可能的选项是在行上使用justify-content-around类或justify-content-between类（点击＆＃34;运行代码段＆＃34;在下面并展开到整页）：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container bg-light my-3">
   <h3 class="text-center pt-2">row justify-content-around</h3>
   <div class="row justify-content-around">
       <div class="col-md-3 bg-warning">Column 1</div>
       <div class="col-md-3 bg-primary">Column 2</div>
       <div class="col-md-3 bg-secondary">Column 3</div>
   </div>
   <h3 class="text-center pt-4">row justify-content-between</h3>
   <div class="row justify-content-between">
       <div class="col-md-3 bg-warning">Column 1</div>
       <div class="col-md-3 bg-primary">Column 2</div>
       <div class="col-md-3 bg-secondary">Column 3</div>
   </div>
</div>

＆＃13;

如您所见，那里不需要不必要的嵌套。

那是因为这些类利用了flexbox属性。

Answer 2

bootstrap中的每一行都是12列。如果你带上前排只有9门，这没关系。在9 cols行内你将再次有12个cols。你要做的最好的事情是计算12楼/＆lt;＃items＆gt;。然后使用该值来确定col大小。

Answer 3

您可以使用不限于12 的auto-layout columns。

对于符合其内容大小的列，请使用.col-auto。

<div class="row">
            <div class="col-auto">
                <img class="list-image">
            </div>
            <div class="col-auto">
                <img class="list-image">
            </div>
            <div class="col-auto">
                <img class="list-image">
            </div>
            <div class="col-auto">
                ... to n
            </div>
</div>

或对于均匀填充整行的列使用.col。

<div class="row">
            <div class="col">
                <img class="list-image">
            </div>
            <div class="col">
                <img class="list-image">
            </div>
            <div class="col">
                ... to n
            </div>
</div>

演示：https://www.codeply.com/go/wqoiLlSUc5

Bootstrap 4中有N列

3 个答案: