集装箱不适用于较大的屏幕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
是上下两行。但对于更大的屏幕,这是两列,宽度超出屏幕。
任何帮助表示赞赏。谢谢
答
关闭你的课程。 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>
+0
它是封闭的..它不只是结构正确...我只是想知道是否嵌套容器内的容器工作正常或不...实际上,我正在工作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>
你可以为这些元素添加CSS吗?听起来像他们可能有一个最大宽度与浮动:左。 – Gezzasa
它的所有操作引导程序的CSS @Gezzasa –
你应该能够编辑CSS。您提供的信息(除非我不完全了解您所问的内容)太少,无法提供帮助。 – Gezzasa