Question

<div class="wrapper">
  <div class="container">
    <div class="blocks">
      <h2 style="text-align: center">Extra Information</h2>
      <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-book fa-2x" aria-hidden="true"></i><br>Reference it for later</div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-commenting-o fa-2x" aria-hidden="true"></i><br>Give Feedback</div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-info fa-2x" aria-hidden="true"></i><br>Why are annotations so important?</div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-magic fa-2x" aria-hidden="true"></i><br>They say Annotation websites are for genius; well this is why you are here!</div>
        <br><br><br>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-exchange fa-2x" aria-hidden="true"></i><br>Interaction</div>
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-question-circle fa-2x" aria-hidden="true"></i><br>Information</div>

      </div>
    </div>
  </div>
</div>

看起来像Image 1

如何使它看起来像图像2，但有2列，因为我的所有人都被困在一起：

Answer 1

首先，您的行数不能超过12，因此您的代码错误。

第二，拜托，请不要使用＆＃34;我会把每个课程都放在其中并且它会工作＆＃34;正如我的同伴所建议的，Bootstrap以级联的方式工作，你只需要设置＆＃34;直到最小的屏幕＆＃34;你想要的。

如果你想在 xs- 中使用2列，那么只需使用col-xs-6，无需设置sm- / md- / lg-。

最后，我真的不明白你想要什么，这个？

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
  <div class="container">
    <div class="blocks">
      <h2 style="text-align: center">Extra Information</h2>
      <div class="row">
        <div class="col-xs-6"><i class="fa fa-book fa-2x" aria-hidden="true"></i><br>Reference it for later</div>
        <div class="col-xs-6"><i class="fa fa-commenting-o fa-2x" aria-hidden="true"></i><br>Give Feedback</div>
      </div>
      <div class="row">
        <div class="col-xs-6"><i class="fa fa-info fa-2x" aria-hidden="true"></i><br>Why are annotations so important?</div>
        <div class="col-xs-6"><i class="fa fa-magic fa-2x" aria-hidden="true"></i><br>They say Annotation websites are for genius; well this is why you are here!</div>
      </div>
      <div class="row">
        <div class="col-xs-6"><i class="fa fa-exchange fa-2x" aria-hidden="true"></i><br>Interaction</div>
        <div class="col-xs-6"><i class="fa  fa-2x" aria-hidden="true"></i><br></div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

在bootstrap中，.col-md-类用于中等屏幕，.col-xs-表示超小而col-sm用于小屏幕

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="wrapper">
    <div class="container">
        <div class="blocks">
            <h2 style="text-align: center">Extra Information</h2>
            <div class="row">
                <div class="col-md-6 col-sm-6 col-xs-6">
                    <i class="fa fa-book fa-2x" aria-hidden="true"></i><br>Reference it for later
                    <br>
                    <i class="fa fa-commenting-o fa-2x" aria-hidden="true"></i><br>Give Feedback
                </div>
                <div class="col-md-6 col-sm-6 col-xs-6">
                    <i class="fa fa-info fa-2x" aria-hidden="true"></i><br>Why are annotations so important?
                    <br>
                    <i class="fa fa-magic fa-2x" aria-hidden="true"></i><br>They say Annotation websites are for genius; well this is why you are here!
                </div>
            </div>
        </div>
    </div>
</div>

将格式从一列更改为两列

2 个答案: