如何自定义boostrap3列到70像素的宽度

Question

我尝试将boostrap栏自定义为70px宽度。 现在，我的col-lg-1列宽度为64.984px，我需要70px。 如何在Boostrap 3中做到这一点。我使用standart 1170容器。

Ready to build

Answer 1

您可以手动设置宽度，如下所示：

<div class="col-xl-1" style="width:70px"></div>

Answer 2

如果您希望每次调用col-xl-1时宽度为70％，请转到bootstrap.css文件。搜索col-xl-1和更改

.col-xl-1 {
  width: 64.984px%;
}

到

.col-xl-1 {
  width: 70%;
}

Answer 3

Bootstrap的网格基于flexbox。您需要做的就是添加自定义类并设置flex-basis属性。

.custom {
  flex-basis: 70px;
}

<div class="container">
    <div class="row">
        <div class="col-xl-1 custom">I am 64px width block</div><!-- /.col-xl-1 -->
    </div>
</div>