分享程序员开发的那些事...
更新时间：2022-10-19 16:15:45
您试图嵌套网格。如果您嵌套网格，则需要在两个列类之间另外添加< div class =row> 以抵消填充。
例如< div> 与类 col-xs-12 col-md-2 有一个直接的孩子< div> with class col-xs-3 col-md-12 box1 。
从
< div class =col -xs-12 col-md-2>
< div class =col-xs-3 col-md-12 box1>
转换为
< div class =col-xs-12 col-md-2>
< div class =row>
< div class =col-xs-3 col-md-12 box1>
我已更新您的示例以添加这些< div class =行> 的
.box1 {background-color：grey;}。box2 {background-color ：red;}
< link href =// maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.cs-s-rel =stylesheet/>< div class =container> < div id =wrapper> < div class =row> < div class =col-md-1>< / div> < div class =col-xs-12 col-md-2> < div class =row> < div class =col-xs-3 col-md-12 box1>测试< / div> < div class =col-xs-9 col-md-12 box2>测试2< / div> < / DIV> < / DIV> < div class =col-xs-12 col-md-2> < div class =row> < div class =col-xs-3 col-md-12 box1>测试< / div> < div class =col-xs-9 col-md-12 box2>测试2< / div> < / DIV> < / DIV> < div class =col-xs-12 col-md-2> < div class =row> < div class =col-xs-3 col-md-12 box1>测试< / div> < div class =col-xs-9 col-md-12 box2>测试2< / div> < / DIV> < / DIV> < div class =col-xs-12 col-md-2> < div class =row> < div class =col-xs-3 col-md-12 box1>测试< / div> < div class =col-xs-9 col-md-12 box2>测试2< / div> < / DIV> < / DIV> < div class =col-xs-12 col-md-2> < div class =row> < div class =col-xs-3 col-md-12>测试< / div> < div class =col-xs-9 col-md-12 test2>测试2< / div> < / DIV> < / DIV> < / DIV> < / div>< / div>
I want to use col-md-2 for the large pc view and col-xs-12 for tablet view.
My problem is that when I turn to larger width view, I see there are gaps between each div. This doesn't happen in the tablet view.
Html code:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div id="wrapper">
<div class="row">
<div class="col-md-1"></div>
<div class="col-xs-12 col-md-2">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="col-xs-3 col-md-12">
test
</div>
<div class="col-xs-9 col-md-12 test2">
test 2
</div>
</div>
</div>
</div>
</div>
Jsfiddle link
Can anyone help me about it? Thanks!
You're trying to nest the grid. If you nest the grid you need an additional <div class="row"> between the two column classes to offset the padding.
For example the <div> with the class col-xs-12 col-md-2 has a direct child <div> with class col-xs-3 col-md-12 box1.
Change this from
<div class="col-xs-12 col-md-2">
<div class="col-xs-3 col-md-12 box1">
into
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
I've updated your example to add these <div class="row">'s
.box1 {
background-color: grey;
}
.box2 {
background-color: red;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div id="wrapper">
<div class="row">
<div class="col-md-1"></div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12">
test
</div>
<div class="col-xs-9 col-md-12 test2">
test 2
</div>
</div>
</div>
</div>
</div>
</div>