网格系统无法在移动设备或小屏幕上正确调整大小

命令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

网格系统无法在移动设备或小屏幕上正确调整大小

回答

相关问题