如何在选项卡内容引导程序中设置固定的自动宽度？

Question

我有一个使用 bootstrap CSS 的搜索框表单，其中包含基于类别选择的几列。 首先，我想在同一行中添加所有列并相应地为它们设置自动宽度

.col-lg-12 {
    width: 100%;
}
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
}
.col-md-6 {
    width: 50%;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
}
.form-group {
    margin-bottom: 15px;
}
.tab-content {
    position: relative;
}

<div class="tab-content">            
<form style="margin-top:-20px" method="GET" action="">
   <div class="col-xs-12 col-md-12 col-lg-12 col-sm-12 go-right">
      <div class="form-group">
	  <img src="http://elizavetababanova.com/wp-content/uploads/2015/06/blue-number-1-md.png" style="width:30px">
      </div>
   </div>
   <div class="col-xs-12 col-md-12 col-lg-12 col-sm-12">
      <div class="form-group">
	  	  <img src="http://www.orangecoastcollege.edu/student_services/counseling/SiteAssets/Pages/DegreeWorks-Plan---Priority-Registration/number-2-orange-md.png" style="width:30px">
      </div>
   </div>
   <div class="col-md-6 col-sm-6 col-xs-6 go-right">
      <div class="form-group">
	  	  	  <img src="http://www.clipartbest.com/cliparts/9cz/E6X/9czE6XLRi.png" style="width:30px">
      </div>
   </div>
   <div class="clearfix"></div>
   </form>
</div>

这是我的代码的简短示例，但我的搜索框中有很多列，如何设置 CSS 以使所有列都在 同一行 以及 自动宽度

我想在同一行显示所有列并自动调整大小 基于宽度，即使我们会有更多的列，它也会被调整为自动宽度。甚至为每列和所有列自动设置宽度。像下面的图片

例如，如果我们将有 6 个部分，则自动调整大小并设置为 100% 宽度

如果我们只有三个部分，那么它将被设置为宽度 100%

Answer 1

好吧，我认为这里对 Bootstrap CSS 存在误解。

如果你想使用引导程序，你不必重写他的规则，特别像你一样。

bootstrap 中的 "col" 类用于定义元素在页面上的显示方式，无论使用何种设备。

下面是对类后缀的一点解释：

• “lg”代表“Large”（大屏幕、台式机）
• “md”代表“Medium”（中型设备，也可以是台式机）
• “sm”代表“小”（平板电脑）
• “xs”代表“超小”（电话）
• 数字代表它将在屏幕上占据的空间（最大为 12）

因此您不必重写规则，只需正确使用它们即可。 例如，我制作了一个 JSFiddle，您可以在其中找到与您正在寻找的内容相似的东西：https://jsfiddle.net/valentinho14/etdsruy4/

对于好的做法，请按照最常用的方式编写此规则（实际上是从手机到桌面的顺序）：

<div class="col-xs-X col-sm-X col-md-X col-lg-X"></div>

如果您不需要所有这些，或者您想在任何设备上设置相同的大小，请使用较小的规则：

<div class="col-xs-6"></div>
<!-- it will take 50% of the screen on Phones, Tablets and desktop

要了解更多信息，请查看官方引导文档，它将向您解释网格系统的所有细节：http://getbootstrap.com/css/#grid

更新
当您有 7 列时，这是一个解决方案。实际上，Bootstrap 并没有提供原生方式来处理这种情况（5 列，7 列）： https://jsfiddle.net/valentinho14/hgxtt2bn/

这是受到这个答案的启发：https://stackoverflow.com/a/21955398/4673732

Answer 2

您可以指定每一列将有多少“列”。

使用引导程序，每行最多 12 列。

在每个 div 上，您可以指定它将占用多少列

<div class="col-xs-6 col-md-4 col-lg-3"></div>

在那个例子中，当宽度特别小时，列将占据窗口的一半，当大小是中等时，三分之一，如果它很大...... 1/4

http://getbootstrap.com/css/#grid

在那里您可以找到更多文档。希望对你有帮助