Question

我在相等宽度的引导col-md-2列中有一些菜单链接，但链接文本的长度不同。如何最好地均匀分隔链接文本？改变col-md-1和col-md-3之间的列类不会给出足够准确的调整。

我在这里设置了一个小提琴：https://jsfiddle.net/nickwuk/hr4fm4gf/

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
        <div id="footer">
            <div class="container">
                <div class="row rowtopmargin">
                    <div id="footpayments" class="col-sm-6 col-md-3">Logo</div>
                    <div class="col-sm-6 col-md-9">
                        <div class="row">
                            <div class="col-md-2 footerlinks col-md-offset-1"><a href="#">Contact</a></div>
                            <div class="col-md-2 footerlinks fl2"><a href="#">Data Sheets</a></div>
                            <div class="col-md-2 footerlinks"><a href="#">Samples Policy</a></div>
                            <div class="col-md-2 footerlinks"><a href="#">Terms</a></div>
                            <div class="col-md-2 footerlinks"><a href="#">FAQ</a></div>
                            <div class="clearfix visible-md-block visible-lg-block footermenuseperator"></div>
                            <div class="col-md-2 footerlinks col-md-offset-1"><a href="#">Promise</a></div>
                            <div class="col-md-2 footerlinks"><a href="#">Testimonials</a></div>
                            <div class="col-md-2 footerlinks"><a href="#">Privacy Policy</a></div>
                            <div class="col-md-2 footerlinks"><a href="index.php">Home</a></div>
                            <div class="col-md-2 footerlinks last"><a href="#">Case Studies</a></div>
                            <div class="clearfix visible-md-block visible-lg-block footermenuseperator"></div>
                        </div>
                    </div>
                </div>
                <!-- end #footer -->
            </div>
        </div>
    </div>
    <!-- end container fluid -->
</div>

Answer 1

您好使用bootstrap和bootstrap类已经带有左右填充，因此调整链接空间我建议您从col-md-2类中删除正确的填充，然后再将其分配给另一个类。< / p>

Answer 2

我使用的解决方案是为指定新百分比宽度的每个div添加一个新类，在css中我添加了以下内容：

@media (min-width: 992px) {
.w14pc {width:14.25%}
.w185pc {width:18.5%}
.w20pc {width:20.385%}
.w12pc {width:12.2%}
.w18pc {width:18%}
}

Bootstrap和相等的水平菜单标题间距

2 个答案: