集装箱不适用于较大的屏幕contatiner流体

我有一个容器流体与col-lg-2左侧的菜单选项和col-lg-10的内容部分。集装箱不适用于较大的屏幕contatiner流体

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid> 
 
    <div class="row"> 
 
     <div class="col-lg-2"> 
 
      <ul> 
 
       <li>one</li> 
 
       <li>two</li> 
 
      </ul> 
 
     </div> 
 
     <div class="col-lg-10> 
 
      <div class="container"> 
 
       <div class="row"> 
 
        <div class="col-sm-6"> 
 
         <div class="form-group"> 
 
          <label for="exampleInputEmail1">Email address</label> 
 
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
 
         </div> 
 
        </div> 
 
        <div class="col-sm-6"> 
 
         <div class="form-group"> 
 
          <label for="exampleInputPassword1">Password</label> 
 
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div>

这工作适合中小屏幕，但大屏幕即最小宽度不起作用：1200像素。在中小屏幕上，col-lg-2和col-lg-10是上下两行。但对于更大的屏幕，这是两列，宽度超出屏幕。

任何帮助表示赞赏。谢谢

来源

2016-11-11 surazzarus

你可以为这些元素添加CSS吗？听起来像他们可能有一个最大宽度与浮动：左。 – Gezzasa

它的所有操作引导程序的CSS @Gezzasa –

你应该能够编辑CSS。您提供的信息（除非我不完全了解您所问的内容）太少，无法提供帮助。 – Gezzasa

关闭你的课程。 container-fluid和'col-lg-10'未关闭。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-lg-2"> 
 

 
    </div> 
 
    <div class="col-lg-10"> 
 
      <div class="container"> 
 
       <div class="row"> 
 
        <div class="col-sm-6"> 
 
         <div class="form-group"> 
 
          <label for="exampleInputEmail1 ">Email address</label> 
 
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
 
         </div> 
 
        </div> 
 
        <div class="col-sm-6 "> 
 
         <div class="form-group "> 
 
          <label for="exampleInputPassword1 ">Password</label> 
 
          <input type="password " class="form-control " id="exampleInputPassword1 " placeholder="Password "> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div>

来源

2016-11-11 09:49:24 GvM

它是封闭的..它不只是结构正确...我只是想知道是否嵌套容器内的容器工作正常或不...实际上，我正在工作clojure和写这个HTML只是为了得到一些概念，如果它的工作或不... ...谢谢 – surazzarus

它你嵌套行withing行的方式。在大于lg的设备上，两列col-lg-2 & col-lg-10将位于同一行上，两个列都可以占用足够的宽度。但对于较小的尺寸，一行将用于col-lg-2，而另一行则用于col-lg-10。所以更好地关闭col-lg-2的第一行，并使用另一行保存下一个col-lg-10以保持每台设备的一致性。

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-lg-2"> 
      <ul> 
       <li>one</li> 
       <li>two</li> 
      </ul> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-lg-10"> 
        <div class="col-sm-6"> 
         <div class="form-group"> 
          <label for="exampleInputEmail1">Email address</label> 
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
         </div> 
        </div> 
        <div class="col-sm-6"> 
         <div class="form-group"> 
          <label for="exampleInputPassword1">Password</label> 
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
         </div> 
        </div> 
     </div> 
    </div> 
    </div>

来源

2016-11-11 11:31:17 mkawa

集装箱不适用于较大的屏幕contatiner流体

回答

相关问题