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>

Bootstrap列调整列数

1 个答案: