引导网格系统：如何仅更改特定元素的宽度？答案

【问题标题】：Bootstrap grid system: How to change width for specific elements only?引导网格系统：如何仅更改特定元素的宽度？
【发布时间】：2019-01-28 11:26:07
【问题描述】：

如何在不影响 default customisation 的情况下仅更改特定元素的 bootsrap grd 宽度？

这是我的意思的屏幕截图，

例如，我想将col-xs-1 更小更改为顶行（带有添加按钮的行）

<div class="col col-xs-1">
    <input type="checkbox" name="delete[]" />
</div>

<div class="col col-xs-11">
...
</div>

有可能吗？

【问题讨论】：

将网格系统更改为 24 个网格而不是 12 个。您可以像这样创建更小的网格

标签： jquery html css twitter-bootstrap grid

【解决方案1】：

最简单的方法是在左边使用auto-layout列...

<div class="col-md-auto">
 <input type="checkbox" name="delete[]" />
</div>
<div class="col col-xs-11">
 ...
</div>

【讨论】：

【解决方案2】：

在 Bootstrap 4 中，您需要添加自定义 CSS，例如

<div class="col col-xs-1 col-xs-1point5">
  <input type="checkbox" name="delete[]" />
</div>

<div class="col col-xs-11 col-xs-10point5">
  ...
</div>

添加 css :-

.col-xs-1point5 {
  -ms-flex: 0 0 10%;
  flex: 0 0 10%;
  max-width: 10%;
}

上述 css 值并不准确，但您可以将其更改为您的自定义宽度并确保所有 % 值都相同。

【讨论】：

【解决方案3】：

请在<div class="col col-xs-1"> 上添加一个类，并在 css 中告诉该类的宽度

<div class="col col-xs-1 small_width">
        <input type="checkbox" name="delete[]" />
    </div>

    <div class="col col-xs-11">
    ...
    </div>
<style>
.small_width{
  width:30px;
}
</style>

【讨论】：

【解决方案4】：

如果您使用的是复选框，则无需在下面添加col正确格式。

<div class="checkbox">
 <input type="checkbox" value="">
 <button type="submit">Sign in</button>
</div>

来源：http://getbootstrap.com/css/#forms-controls

参见复选框部分。

【讨论】：

【解决方案5】：

试试这个..

<div class="row">
    <div class="col-xs-2">
      <div class="row">
        <div class="col-xs-1"><input type="checkbox" name="delete[]"></div>
        <div class="col-xs-1">
          <button class="btn btn-default">Text</button>
        </div>
      </div>
   </div>
</div>

您可能还会发现这个 24 列网格示例很有用..

http://www.bootply.com/113382

【讨论】：