How to set responsive divs in my case?

问题

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!

回答1:

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>

回答2:

The gaps are defined in Bootstrap grid settings. Classes with xs-* are all 100% width blocks, so there are no gaps. If you want to have grid system without gaps on all screen sizes, you need to customize your Bootstrap build - http://getbootstrap.com/customize/

来源：https://stackoverflow.com/questions/27321380/how-to-set-responsive-divs-in-my-case