Question

我目前正在使用上面有文字的行，每个下面有4个图标作为列出的div。我让他们在桌面上占据100％的div，在平板电脑上占2％，而我无法在移动设备上将它们叠加到2。我只让他们在一个堆叠在一起。有关如何让它们显示2的任何想法？我使用媒体查询来缩小字体但我不知何故卡住了。

我尝试将类col-xs-6添加到div中，但这似乎不起作用。我非常喜欢引导程序，所以我可能会想念它的网格系统。

对不起，我是一个尝试学习的新手，我查看了其他网站的源代码，但无法找到解决方案。

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/

＆＃13;

@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;
  }
}

＆＃13;

<!-- 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>

＆＃13;

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>

.row

FWIW .col-xs-12应该在单独的元素上使用，而不是像submitRequest: function(type, url) { this.getMaxValue(PORTALURL.EXCEPTION.MAX_VALUE).then(function(response) { var maxValue = Ext.decode(response.responseText); if (grid.getSelectionModel().getSelection().length > maxValue){ Ext.Msg.alert('Alert!', type + ' count is more than 10'); return; } }).done(); }, getMaxValue : function(url) { return Ext.Ajax.request({ url: url, ... }) }这样的列类。

嵌套的div和移动列

1 个答案: