引导列调整列数

Question

我有以下代码，目前将项目列为 6 列。我只有 5 个项目，所以想相应地将它们均匀地间隔开。尝试将以下列表项分成 5 列而不是 6 列(引导)。如何相应地调整代码？我理解 col-md-12 和 col-md-2 12/2 = 6...如何调整代码以使其 5 列变为 12 列？

<div class="row">
<div class="col-md-12">
<div class="mu-counter-area">
<ul class="mu-counter-nav">
<li class="col-md-2 col-sm-3 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" data-target="#collapseFood" aria-expanded="false"  aria-controls="collapseFood">
<span>À LA CARTE</span>
</div>
</li>
<li class="col-md-2 col-sm-3 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" data-target="#collapseVegan" aria-expanded="false"  aria-controls="collapseVegan">
<span>VEGAN</span>
</div>
</li>
<li class="col-md-2 col-sm-3 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" data-target="#collapseJain" aria-expanded="false"  aria-controls="collapseJain">
<span>JAIN</span>
</div>
</li>

<li class="col-md-2 col-sm-3 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" data-target="#collapseBar" aria-expanded="false" aria-controls="collapseBar">
<span>BAR</span>
</div>
</li>
<li class="col-md-2 col-sm-3 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" data-target="#collapseCocktail" aria-expanded="false" aria-controls="collapseCocktail">
<span>COCKTAILS</span>
</div>
</li>
</ul>
</div>
</div>
</div>

这是一个JSFIDDLE：

https://jsfiddle.net/hwbmaL6n/

你会看到有 5 个项目，但第 6 个项目的最后有一个很大的空间，尽管第 6 个项目不存在。如何将其减少到只有 5 个项目，以便项目在页面上居中？

Answer 1

正如我在您的小提琴中看到的那样，您使用的是bootstrap的第 3 版，因此您可以使用offset功能。

https://getbootstrap.com/docs/3.3/css/#grid-offsetting

您也有一个错误，因为您指定了 5 次sm-3。这是15 cols总之。你只有 12 个。如果指定超过 12 个，则它换行。 请参阅此代码。我认为，这就是你想要实现的目标。

<div class="row">
<div class="col-md-12">
<div class="mu-counter-area">
<ul class="mu-counter-nav">
<li class="col-sm-offset-1 col-md-offset-1 col-md-2 col-sm-2 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" data-target="#collapseFood" aria-expanded="false"  aria-controls="collapseFood">
<span>À LA CARTE</span>
</div>
</li>
<li class="col-sm-2 col-sm-2 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" data-target="#collapseVegan" aria-expanded="false"  aria-controls="collapseVegan">
<span>VEGAN</span>
</div>
</li>
<li class="col-md-2 col-sm-2 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" data-target="#collapseJain" aria-expanded="false"  aria-controls="collapseJain">
<span>JAIN</span>
</div>
</li>

<li class="col-md-2 col-sm-2 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" data-target="#collapseBar" aria-expanded="false" aria-controls="collapseBar">
<span>BAR</span>
</div>
</li>
<li class="col-md-2 col-sm-2 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" data-target="#collapseCocktail" aria-expanded="false" aria-controls="collapseCocktail">
<span>COCKTAILS</span>
</div>
</li>
</ul>
</div>
</div>
</div>