Css 引导中的5个等宽列（容器的全宽）

根据我的psd模板，我有一个由5个等宽（344px）列组成的容器。我决定在响应性方面使用bootstrap。但现在我对这项任务感到沮丧

是否有任何方法可以实现这一点，或者我需要：

• 重建psd模板以适应引导网格和大小
• 不使用引导和编写自定义响应类

代码笔：

---

使用bootstrap 4很容易。您只需在列上添加一行

flex

即可定义自定义宽度

.row>.col{
弹性：0 344px；
背景：#eee；
}

1.
2.
3.
4.
5.

您也可以使用Flexbox。我建议您使用1200px或更小的最大容器宽度

<div class="container">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
</div>

.container{

    display: flex;
    width: 1720px;

}

1.
2.
3.
4.
5.
.集装箱{
显示器：flex；
宽度：1720px；
}

我建议使用自动布局的

col lg

列以获得更大的宽度，这样您就可以有5个横列，然后在

md

、

sm

等上缩小到标准大小的网格列

...
...
...
...
...
...
...

---

您可以“以正确的方式”自定义您的引导版本。通过此页面的链接，您可以自定义许多设置，包括网格列的数量

---

他们不会做出响应吗？这将是一个1720px宽的排？@MichaelCoker，没错。我希望它是响应性的，所以当你缩小行的宽度时，1行将由3-4列组成，而不是5列，依此类推。@Src好的，刚刚更新了我的答案。这就是你想要的吗？@MichaelCoker这似乎是我想要的，但现在我遇到了一个问题：当你缩小浏览器窗口的宽度并穿过断点时，在4列之后会有一些空闲空间。我可能需要将容器设置为100%内容大小？@Src如果列的宽度是固定的，则最后一列后面会有空格。你希望它表现如何？如果你能在发帖前弄清楚你需要什么，并确保你的帖子对你的最终目标有一个清晰的描述，这会有帮助。我能在这种布局中使用自定义列宽吗？或者我应该只使用flexbox而不使用bootstrap来实现这类功能？Bootstrap4是flexbox，所以我认为不需要定制类。

<div class="container">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
</div>

.container{

    display: flex;
    width: 1720px;

}

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="w-100 hidden-md-down">
               <!--force wrap every 5 on lg-->
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
    </div>
</div>