如何响应地对行，然后在引导程序中的列进行分组？

Question

我有一个基于bootstrap的响应式Web布局。这是我的两个布局：

[1A] [1B] [1C]

[2A] [2B] [2C]

[3A] [3B] [3C]

这是小屏幕的布局。

[1A]

[1B]

[1C]

[2A] [3A]

[2B] [3B]

[2C] [3C]

对于小屏幕，我在水平组周围有一个盒子（2A和3A，2B和3B等）。但是，在大屏幕上，我希望这些项目是垂直分组的，所以所有的A都在一个方框中，所有的B都在一个方框中。我该怎么做，因为标签需要跳过几个部分，因为HTML是书面。请参阅下面的代码。我该怎么做？

<div class="container-fluid PageView text-center">
    <div class="row Page2">
        <div class="col-sm-4">
            <div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span>

            </div>

        </div>
        <div class="col-sm-4">
            <div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok glyphicon-bordered"></span>

            </div>
        </div>
        <div class="col-sm-4">
            <div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone glyphicon-bordered"></span>

            </div>
        </div>
        <div class="col-sm-4">
            <div class="box">
                <div class="row">
                    <div class="col-xs-6 col-sm-12">
                        <h2><strong>Title 1</strong></h2>
                    </div>
                    <div class="col-xs-6 col-sm-12">
                        <p class="lead">Text1</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="box">
                <div class="row">
                    <div class="col-xs-6 col-sm-12">
                        <h2><strong>Title 2</strong></h2>
                    </div>
                    <div class="col-xs-6 col-sm-12">
                        <p Text 2</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="box">
                <div class="row">
                    <div class="col-xs-6 col-sm-12">
                        <h2><strong>Title 3</strong></h2>
                    </div>
                    <div class="col-xs-6 col-sm-12">
                        <p class="lead">Text 3</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

修改

使用此代码，我得到以下结果：

@media (min-width:769px){ /*use a value for your breakpoint*/
  .Page2 > *{border:5px solid white; background:#3DBEAF; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
  .Page2 > *:nth-child(-n+3){border-bottom:0; }
  .Page2 > *:nth-last-child(-n+3){border-top:0;}
}

如何确保只有外侧4个角落是圆形的？还有什么想法为什么在街区中间有一条线呢？

Answer 1

在所有这些边框周围添加边框，然后定位前三个/最后三个以自定义底部/顶部边框。

@media (min-width:769px){ /*use a value for your breakpoint*/
  .Page2 > *{border:1px solid #999;}
  .Page2 > *:nth-child(-n+3){border-bottom:0;}
  .Page2 > *:nth-last-child(-n+3){border-top:0;}
}

评论

后

更新了代码

@media (min-width:769px){ /*use a value for your breakpoint*/
  .Page2 > *{border:5px solid white;background:#3DBEAF;}
  .Page2 > *:nth-child(-n+3){
    border-bottom:0;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
  }
  .Page2 > *:nth-last-child(-n+3){
    border-top:0;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
  }
}

更新了演示

@media (min-width: 769px) {
  /*use a value for your breakpoint*/
  .Page2 > * {
    border: 5px solid white;
    background: #3DBEAF;
  }
  .Page2 > *:nth-child(-n+3) {
    border-bottom: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .Page2 > *:nth-last-child(-n+3) {
    border-top: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid PageView text-center">
  <div class="row Page2">
    <div class="col-sm-4">
      <div class="glyphicon-ring">1A <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span>

      </div>

    </div>
    <div class="col-sm-4">
      <div class="glyphicon-ring">1B <span class="glyphicon glyphicon-ok glyphicon-bordered"></span>

      </div>
    </div>
    <div class="col-sm-4">
      <div class="glyphicon-ring">1C <span class="glyphicon glyphicon-phone glyphicon-bordered"></span>

      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <div class="row">
          <div class="col-xs-6 col-sm-12">
            <h2><strong>2A Title 1</strong></h2>
          </div>
          <div class="col-xs-6 col-sm-12">
            <p class="lead">3A Text1</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <div class="row">
          <div class="col-xs-6 col-sm-12">
            <h2><strong>2B Title 2</strong></h2>
          </div>
          <div class="col-xs-6 col-sm-12">
            <p class="lead">3B Text 2</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <div class="row">
          <div class="col-xs-6 col-sm-12">
            <h2><strong>2C Title 3</strong></h2>
          </div>
          <div class="col-xs-6 col-sm-12">
            <p class="lead">3C Text 3</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>