代码之家 › 专栏 › 技术社区 › nsilva

Bootstrap 4,不同内容宽度的列之间的间距相等

bootstrap-4 twitter-bootstrap

nsilva · 技术社区 · 6 年前

所以在我的页脚里 <div class="col"> 这将创建相同宽度的列,虽然这很好,但每列中的内容宽度不同,因此从视觉上看,每列之间的间距似乎是不同的宽度,如下所示:-

有没有办法根据内容的宽度在这些列之间创建相等的间距,以便每个列之间的间距看起来相同?

3 回复 | 直到 6 年前

Carol Skelly 6 年前

最简单的方法是合并 col-auto (包裹柱子)用 col (以分隔列)。。。

<div class="row">
        <div class="col-auto">
            ...
        </div>
        <div class="col"> </div>
        <div class="col-auto">
            ...
        </div>
        <div class="col"> </div>
        <div class="col-auto">
            ...
        </div>
        <div class="col"> </div>
        <div class="col-auto">
           ...
        </div>
        <div class="col"> </div>
        <div class="col-auto">
            ...
        </div>
        <div class="col"> </div>
        <div class="col-auto">
            ...
        </div>
        <div class="col"> </div>
        <div class="col-auto">
            ...
        </div>
    </div><!--/row-->

演示: https://www.codeply.com/go/s4Jk0NBC6a

Muhammad Bilal 6 年前

要调整间距,请在页脚div标记中添加一个类“.no gutter”。并在css文件中添加样式。

.no-gutter [class*='col-'] {
  width: auto;
}

Den Potapov 6 年前

可以使用 flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在Bootstrap 4中,有一些实用程序可以方便地使用它 https://getbootstrap.com/docs/4.1/utilities/flex/

例子: https://www.codeply.com/go/WQtjXDd8qA

推荐文章

seriously · 按钮中元素的对齐

2 年前

USK · 引导模型在我的HTML文件中不起作用

2 年前

onit · 如何在单击按钮时从页面(引导程序4)隐藏或删除搜索表单?

2 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

2 年前

user9644796 · 如何检查折叠的导航栏是否打开?

6 年前

JoeSlav · 使用引导上载损坏的文件

6 年前

John · 引导程序4,表单内联未在XS视图上对齐

6 年前

J. Sparks · 奇怪的图像定位(HTML、CSS、Bootstrap)

6 年前

user9719859 · 如何在bootstrap 4中更改选择选项programmaticaly?

6 年前

im5an · 如何使用angular在单行中显示徽标和导航栏?

6 年前