代码之家 › 专栏 › 技术社区 › RA19

引导列调整列数

twitter-bootstrap html

RA19 · 技术社区 · 5 年前

<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个项目,但一个大的空间在最后的第六个项目,虽然第六个项目不存在。我该如何减少到只有5个项目,使项目集中在页面上?

0 回复 | 直到 5 年前

dns_nx 5 年前

正如我在你的小提琴上看到的,你使用的是版本3 bootstrap ,所以您可以使用 offset 功能。

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

还有一个错误,因为您指定了 sm-3 5次。这是 15 cols

<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>