Bootstrap列調整列數

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

另外，您還出錯，因為您指定了sm-3 5次。 這是總計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>