Bootstrap 4 - 響應水平導航

Question

我遇到了一個Bootstrap 4導航問題，如果導航鏈接的寬度太小，導航鏈接會懸垂。移動設備通常是這種情況。

下面是一個例子：http://codepen.io/anon/pen/ZLKGrx

<div class="container"> 
    <div class="row"> 
    <div class="col-6 offset-3 columnbg"> 
     <ul class="nav nav-pills"> 
     <li class="nav-item"> 
      <a class="nav-link active" href="#">LongTabName</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">LongTabName</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">LongTabName</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link disabled" href="#">LongTabName</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link disabled" href="#">LongTabName</a> 
     </li> 
     </ul> 
    </div> 
    </div> 
</div> 

我想實現的東西，是適合於較小的顯示器。我將如何做到這一點？

Answer 1

col-6只有最小的屏幕上半寬，所以它準確地不模仿手機屏幕寬度。當導航的內容對於移動寬度來說太長時，您可以使用其他實用工具類之一在導航欄中顯示較少的內容（縮寫標籤或僅圖標）。

<ul class="nav nav-pills"> 
     <li class="nav-item"> 
      <a class="nav-link active" href="#"><span class="hidden-xs-down">LongTabName</span><span class="hidden-sm-up">TN</span></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#"><span class="hidden-xs-down">LongTabName</span><span class="hidden-sm-up">TN</span></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#"><span class="hidden-xs-down">LongTabName</span><span class="hidden-sm-up">TN</span></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#"><span class="hidden-xs-down">LongTabName</span><span class="hidden-sm-up">TN</span></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#"><span class="hidden-xs-down">LongTabName</span><span class="hidden-sm-up">TN</span></a> 
     </li> 
     </ul> 

http://www.codeply.com/go/WXqhlCDp9o

Answer 2

有在CSS一招，可以幫助你指定一個元素取決於由屏幕width.height調整：

@media (max-width: 600px) { 
    .row { 
    //change width here 
    } 
} 

正如你可以看到，當屏幕的寬度變得比600px的低（移動應該更小），@media css將覆蓋;）

Answer 3

Bootstrap是爲移動優先而構建的。您正在運行到這個問題的唯一原因是因爲你還沒有完全落實navbar：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
 
    <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <a class="navbar-brand" href="#">Navbar</a> 
 

 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
 
    <ul class="navbar-nav mr-auto"> 
 
     <li class="nav-item active"> 
 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#">Link</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link disabled" href="#">Disabled</a> 
 
     </li> 
 
    </ul> 
 
    <form class="form-inline my-2 my-lg-0"> 
 
     <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
 
    </form> 
 
    </div> 
 
</nav>