網格系統無法在移動設備或小屏幕上正確調整大小

命令col-xs-whatever不起作用，並在移動視圖或小屏幕上顯示斷續線。網格系統無法在移動設備或小屏幕上正確調整大小

注意：我還測試了類.col-作爲Bootstrap 4在文檔中指定，但它仍然不起作用。

不能正確調整大小和堆積，這裏是有關的代碼：

.navbar{ 
 
    background-image: cornflowerblue; 
 
} 
 
#mainNav{ 
 
    border: 5px solid black; 
 
    margin: 3%; 
 
    background-color: white; 
 
} 
 
body{ 
 
    background-color: grey; 
 
} 
 
#navContent{ 
 
    background-color: white; 
 
    margin: 3%; 
 
} 
 
#final{ 
 
    border: 5px solid black; 
 
    margin: 3%; 
 
    background-color: white; 
 
} 
 
#searchFormContent{ 
 
    margin: auto; 
 
    width: 80%; 
 
} 
 
#navToggler{ 
 
    float: right; 
 
} 
 
.navbar-toggler{ 
 
    float:right; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 
<body> 
 
    <div class="container-fluid"> 
 
     <section class="row" id="mainNav"> 
 
      <div class="col-12"> 
 
       <nav class="navbar sticky-top navbar-expand-md"> 
 
        <div class="col-xs-1 col-md-2"> 
 
         <a class="navbar-brand" href="#">Brand</a> 
 
        </div> 
 

 
        <div class="col-xs-10 col-md-7"> 
 
         <form class="form-inline" id="searchForm" role="search"> 
 
          <div class="input-group" id="searchFormContent"> 
 
           <input class="form-control" type="text" placeholder="Busqueda"> 
 
           <div class="input-group-btn"> 
 
            <button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button> 
 
           </div> 
 
          </div> 
 
         </form> 
 
         <span id="destiny1"></span> 
 
        </div> 
 
        <div class="col-xs-1 col-md-3"> 
 
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navToggler" aria-controls="navToggler" aria-expanded="false" aria-label="Toggle navigation"> 
 
          <i class="fa fa-bars"></i> 
 
         </button> 
 
         <div class="collapse navbar-collapse" id="navToggler"> 
 
          <ul class="navbar-nav"> 
 
           <li class="nav-item"><a class="nav-link" href="#">Option 1</a></li> 
 
           <li class="nav-item"><a class="nav-link" href="#">Option 2</a></li> 
 
          </ul> 
 
         </div> 
 
         <span id="destiny2"></span> 
 
        </div> 
 
       </nav> 
 
      </div> 
 
      </section> 
 
      </div> 
 
      </body>

來源

2017-10-04 SilverSurfer

我可以在手機中看到您的設計視圖嗎？ –

@SanjayPrajapati這是移動設備的屏幕截圖。請注意，您可以在片段中看到仍然無法正常工作：https://imgur.com/JJpGzFe – SilverSurfer

但我需要您的需要移動視圖屏幕短 –

我不知道這是不是因爲你沒有指定你想要的結果。

我改變col-xs-whatever到col-whatever，你是申請保證金和邊界上的CSS row應用於#mainNav後，這就是爲什麼所有列可能不適合裏面。

於是我在一個包裹導航移動row和#mainNav

去除。這裏row改變代碼：

.navbar{ 
 
    background-image: cornflowerblue; 
 
} 
 
#mainNav{ 
 
    border: 5px solid black; 
 
    margin: 3%; 
 
    background-color: white; 
 
} 
 
body{ 
 
    background-color: grey; 
 
} 
 
#navContent{ 
 
    background-color: white; 
 
    margin: 3%; 
 
} 
 
#final{ 
 
    border: 5px solid black; 
 
    margin: 3%; 
 
    background-color: white; 
 
} 
 
#searchFormContent{ 
 
    margin: auto; 
 
    width: 80%; 
 
} 
 
#navToggler{ 
 
    float: right; 
 
} 
 
.navbar-toggler{ 
 
    float:right; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 

 
<div class="container-fluid"> 
 
     <section id="mainNav">  
 
      <nav class="navbar sticky-top navbar-expand-md row"> 
 
       <div class="col-2 col-md-2"> 
 
        <a class="navbar-brand" href="#">Brand</a> 
 
       </div>  
 
       <div class="col-8 col-md-7"> 
 
        <form class="form-inline" id="searchForm" role="search"> 
 
         <div class="input-group" id="searchFormContent"> 
 
          <input class="form-control" type="text" placeholder="Busqueda"> 
 
          <div class="input-group-btn"> 
 
           <button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button> 
 
          </div> 
 
         </div> 
 
        </form> 
 
        <span id="destiny1"></span> 
 
       </div> 
 
       <div class="col-2 col-md-3"> 
 
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navToggler" aria-controls="navToggler" aria-expanded="false" aria-label="Toggle navigation"> 
 
           <i class="fa fa-bars"></i> 
 
          </button> 
 
        <div class="collapse navbar-collapse" id="navToggler"> 
 
         <ul class="navbar-nav"> 
 
          <li class="nav-item"><a class="nav-link" href="#">Option 1</a></li> 
 
          <li class="nav-item"><a class="nav-link" href="#">Option 2</a></li> 
 
         </ul> 
 
        </div> 
 
        <span id="destiny2"></span> 
 
       </div> 
 
      </nav>  
 
     </section> 
 
    </div>

來源

2017-10-04 11:59:52 iamwtk

感謝您的回答，仍然不能處理您的代碼，請檢查它的外觀：https://imgur.com/QrYUnLk – SilverSurfer

如果我將類行移動到該部分，它會是相同的？ – SilverSurfer

不，因爲你會用#mainNav的css重寫行樣式。我現在編輯我的答案，它應該工作我把行類移入導航元素。這裏是工作示例http://jsbin.com/luteyiyaxa/edit – iamwtk

由iamwtk建議，問題的一部分是，您必須使用col-XYZ來代替col-xs-XYZ，但最大的問題是網格的內容：Brand和Busqueda都超過了網格的寬度col，打破這一行...嘗試使用col分佈並改變「searchFormContent」的寬度使其變爲動態;）

來源

2017-10-04 12:18:35

網格系統無法在移動設備或小屏幕上正確調整大小

回答

相關問題