Bootstrap和相等的水平菜單標題間距

-1

我在等寬引導col-md-2列中有一些菜單鏈接，但鏈接文本的長度不同。我如何最好地均勻分隔鏈接文字？改變col-md-1和col-md-3之間的色譜柱級別不會給出足夠精確的調整。Bootstrap和相等的水平菜單標題間距

我設置一個小提琴這裏：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>

來源

2016-10-27 Nick W

「？如何將我最好的均勻空間鏈接文本」 - 你想要相對於彼此的均勻間隔的文本還是相對於它們所在的單元格？ – RahulB

如果第1行和第2行中的文本位於列寬度與該列中最寬文本一樣寬的虛構列中，那麼我希望虛擬列間隔均勻。因此，術語和家庭的虛擬列將是最窄的，樣本政策和隱私政策將是最廣泛的，並且這些虛擬列之間的分隔將是平等的。 –

嗨，你正在使用的引導程序和自舉類已經配備了左右填充因此調整鏈接的空間，我建議你在將其分配給另一個類之前，從col-md-2類中刪除正確的填充。

來源

2016-10-27 12:11:32

我認爲即使沒有正確的填充，'Contact'和'Promise'的第一列仍然太寬，所以也許我應該用一個只適用於更寬屏幕的新類來替代col-md-2類的寬度寬度並重置爲移動設備。 –

我用的解決方案是一種新的類添加到指定一個新的百分比寬度每格，在CSS中添加以下：

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

來源

2016-10-31 15:54:20

Bootstrap和相等的水平菜單標題間距

回答

相關問題