靜態導航欄不在寬度範圍內

我正在使用Twitter Bootstrap的導航欄navbar-static-top。當元素超出身體寬度時，它們不擴展身體，但只是「移出它」，從而導致導航欄不能展開。我怎麼能強制我的導航欄適合我的整個頁面？靜態導航欄不在寬度範圍內

我使用的是DataTables，在移動時，表格大於身體寬度，超出身體元素的界限，但導航欄以身體寬度結束。我希望navbar繼續，直到頁面上有可滾動的空間。

這是我的導航欄代碼：

<nav class="navbar navbar-inverse navbar-static-top navbar-lg" role="navigation"> 
<div class="container" > 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="start.php"> 
      <img src="http://placehold.it/150x51&text=Logo" alt=""> 
     </a> 
    </div> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav col-lg-5 col-md-5 col-xs-12"> 
      <li> 
       <a href="">Esileht</a> 
      </li> 
      <li> 
       <a href="">Korraldajad</a> 
      </li> 
      <li> 
       <a href="">Kontakt</a> 
      </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right col-lg-4 col-md-4 col-xs-12"> 
      <form class="navbar-form navbar-input-group" action='functions.php' method='post'> 
       <div class="form-group"> 
        <select class="form-control" name='field_selector' id="field_selector"> 
         <option value='pet' <?php if ($selected_field == "pet") { echo "selected";}?>>Petanque</option> 
         <option value='pil' <?php if ($selected_field == "pil") { echo "selected";}?>>Pool</option> 
         </select> 
       </div> 
       <div class="form-group"> 
        <select class="form-control" name='lang_selector' id="lang_selector"> 
         <option value='EE' <?php if ($selected_lang == "EE") { echo "selected";}?>>Eesti</option> 
         <option value='EN' <?php if ($selected_lang == "EN") { echo "selected";}?>>Inglise</option> 
         </select> 
       </div> 
       <button class='btn btn-primary' name='changelang'>Vaheta keelt/ala</button> 
      </form> 
     </ul> 
    </div> 

    <!-- /.navbar-collapse --> 
</div> 
<!-- /.container -->

這是它的外觀頁：

Body元素的結束位置的導航欄結束後，我想它超過頁面的全長。有任何想法嗎？

編輯：

添加更多的代碼：

<body> 
    <!-- Navigation --> 
    <?php include('navbar.php');?> 

    <!-- Page Content --> 
    <div class="container"> 
     <!-- In here is the form and table --> 
    </div> 
</body>

來源

2017-09-25 Banana

[Codepen]（https://codepen.io/anon/pen/eGgONV），這裏顯示全長。我無法複製您的問題。你能否澄清更多？ –

當表格元素超出正文範圍時，問題就會出現。在body元素突出顯示的位置添加新圖片（寬度小於表格寬度）。 – Banana

確保你的'表格'在'容器'中。你能否提供具有表格的代碼，以便我可以看到有什麼問題。如所提供的代碼不具有我們在正文中看到的形式。 –

我通過使用屬性overflow-x: scroll上側添加滾動條到我的表，以不溢出解決了該問題（因此在移動視圖中的表是可滾動的）。

來源

2017-09-26 11:57:49 Banana

靜態導航欄不在寬度範圍內

回答

相關問題