如何在tab-content bootstrap中设置固定的自动宽度？

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”代表“大”（大屏幕，桌面）
• “md”代表“中等”（中型设备，也可以是台式机）
• “sm”代表“小”（平板电脑）
• “xs”代表“Extra small”（电话）
• 数字代表它在屏幕上占用的空间（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

要获得更多有关此信息，请查看官方bootstrap文档，它将向您解释网格系统的所有详细信息：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

在那里你可以找到更多文档。我希望它有所帮助