如何在制表符内容引导程序中设置固定的自动宽度？

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有一个误解。

如果您想使用引导程序，则不必像其他人那样覆盖他的规则。

引导程序中的“ col”类用于定义元素在任何设备上如何显示在页面上。

这是对类后缀的一些解释：

• “ lg”代表“大”（大屏幕，台式机）
• “ 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

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