如何将引导程序 3 列自定义为 70px 宽度答案

【问题标题】：How to customize boostrap3 colum to 70px width如何将引导程序 3 列自定义为 70px 宽度
【发布时间】：2019-08-06 05:40:05
【问题描述】：

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-lg-1">I am 64px width block</div>
    <!-- /.col-xl-1 -->
  </div>
</div>

【问题讨论】：

我将容器大小更改为 1201px

标签： html css twitter-bootstrap grid

【解决方案1】：

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

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

【讨论】：

对不起，我的错，我会澄清一下，它们应该是 luqiud 大小，在 1170 容器中
"col-xl-1" 默认有自己的宽度。向其添加内联样式将覆盖其默认宽度。

【解决方案2】：

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

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

到

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

【讨论】：

对不起，我的错，我会澄清一下，它们应该是 luqiud 大小，在 1170 容器中。

【解决方案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>

【讨论】：

“Bootstrap 的网格基于 flexbox。” - 不在 BS 3 中，这是 OP 在这里使用的。