jquery - 嵌套的 div 和移动列

Question

我目前正在处理一行，上面有文本，下面有 4 个图标作为列出的 div。我让它们在桌面上跨越 100% 的 div，在平板电脑上跨越 2 个，但我无法让它们在移动设备上堆叠 2 个。我只让它们一层一层地堆叠起来。关于如何让他们显示 2 的任何想法？我使用媒体查询来缩小字体，但我不知何故被卡住了。

我尝试将类 col-xs-6 添加到 div，但这似乎不起作用。我对 bootstrap 还很陌生，所以我可能不太了解它是网格系统。

抱歉，我是一个正在努力学习的新手，我查看了其他网站的源代码但找不到解决方案。

Desktop:
[[ MAIN DIV W/ TEXT ]]
[[1]] [[2]] [[3]] [[4]]

Tablet:
[[ MAIN DIV ]]
[[1]] [[2]]
[[3]] [[4]]
Mobile:
[[ MAIN DIV ]]
[[1]]
[[2]]
[[3]]
[[4]]

这是我的一小段代码:https://jsfiddle.net/hecq0yq6/1/

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

.discuss {
  background-color: #00CCDD;
  padding-bottom: 50px;
}

.discuss h1 {
  text-transform: uppercase;
  font-family: Impact, sans-serif;
  font-size: 55px;
  padding-top: 40px;
  padding-bottom: 40px;
  color: #FFF;
  margin: 0;
}

.discuss p {
  color: #FFF;
  font-size: 17px;
  padding: 0 50px 0 50px;
  width: 100%;
  text-align: center;
}

.icons {
  margin-top: 20px;
  /*	margin-bottom: 40px;*/
  text-align: center;
  color: #FFF;
}

.icons a:hover {
  text-decoration: none;
  color: #FFF;
}

@media (max-width: 767px) {
  .icons,
  h3 {
    font-size: 12px;
  }
}

<!-- DISCUSS SECTION NESTED WITH ICONS -->
<div class="row col-xs-12 discuss">
  <h1 class="text-center">HEADER</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
  <p>Not sure why you use lorem ipsum?</p>

  <!-- NESTED 4 COLUMNS TEST -->

  <div class="row">

    <!-- Div col-sm-3 -->
    <div class="col-sm-6 col-lg-3 icons"> <a href="http://www.google.com" class="icons"><i class="fa fa-user" style="font-size:48px;"></i><br>
              <h3>Icon<br>
              #1</h3>
              </a> </div>
    <div class="col-sm-6 col-lg-3 icons"> <a href="http://www.yahoo.com" class="icons"><i class="fa fa-users" style="font-size:48px;"></i><br>
              <h3>Icon<br>
              #2</h3>
              </a> </div>
    <div class="col-sm-6 col-lg-3 icons"> <a href="http://www.dicks.com" class="icons"><i class="fa fa-briefcase" style="font-size:48px;"></i><br>
              <h3>Icon<br>
              #3</h3>
              </a> </div>
    <div class="col-sm-6 col-lg-3 icons"> <a href="http://www.cnn.com" class="icons"><i class="fa fa-file-text" style="font-size:48px;"></i><br>
              <h3>Icon<br>
              #4</h3>
              </a> </div>
  </div>
</div>

Answer 1

使用 .col-xs-6 作为 .col-md-6 的补充或替代。

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

.discuss {
  background-color: #00CCDD;
  padding-bottom: 50px;
}

.discuss h1 {
  text-transform: uppercase;
  font-family: Impact, sans-serif;
  font-size: 55px;
  padding-top: 40px;
  padding-bottom: 40px;
  color: #FFF;
  margin: 0;
}

.discuss p {
  color: #FFF;
  font-size: 17px;
  padding: 0 50px 0 50px;
  width: 100%;
  text-align: center;
}

.icons {
  margin-top: 20px;
  /*	margin-bottom: 40px;*/
  text-align: center;
  color: #FFF;
}

.icons a:hover {
  text-decoration: none;
  color: #FFF;
}

@media (max-width: 767px) {
  .icons,
  h3 {
    font-size: 12px;
  }
}

<!-- DISCUSS SECTION NESTED WITH ICONS -->
<div class="row">
  <div class="col-xs-12 discuss">

    <h1 class="text-center">HEADER</h1>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
    </p>
    <p>
      Not sure why you use lorem ipsum?
    </p>

    <div class="row">

      <div class="col-xs-6 col-sm-6 col-lg-3 icons">
        <a href="http://www.google.com" class="icons">
          <i class="fa fa-user" style="font-size:48px;"></i>
          <br>
          <h3>Icon<br> #1</h3>
        </a>
      </div>
      <div class="col-xs-6 col-sm-6 col-lg-3 icons">
        <a href="http://www.yahoo.com" class="icons">
          <i class="fa fa-users" style="font-size:48px;"></i>
          <br>
          <h3>Icon<br> #2</h3>
        </a>
      </div>
      <div class="col-xs-6 col-sm-6 col-lg-3 icons">
        <a href="http://www.dicks.com" class="icons">
          <i class="fa fa-briefcase" style="font-size:48px;"></i>
          <br>
          <h3>Icon<br> #3</h3>
        </a>
      </div>
      <div class="col-xs-6 col-sm-6 col-lg-3 icons">
        <a href="http://www.cnn.com" class="icons">
          <i class="fa fa-file-text" style="font-size:48px;"></i>
          <br>
          <h3>Icon<br> #4</h3>
        </a>
      </div>
    
    </div>
  </div>
</div>

FWIW .row 应该用在单独的元素上，而不是用在像 .col-xs-12 这样的列类的元素上。