Question

由于社交图标的列表，我正在努力理解与行相关的列。现在我将它们以lg视图大小显示在一行中，并且希望它们以中等视图大小和小视图和超小视图大小保持在一行中，我希望它们列在2行3列6列中。 / p>

<div class="row">
            <div class="col-lg-1 col-lg-offset-3 col-md-offset-6 col-md-1">
                <a href=""><i class="fa fa-behance-square fa-icon"></i></a>
            </div>
            <div class="col-lg-1 col-md-1">
                <a href=""><i class="fa fa-linkedin-square fa-icon"></i></a>
            </div>
            <div class="col-lg-1 col-md-1">
                <a href=""><i class="fa fa-twitter-square fa-icon"></i></a>
            </div>
            <div class="col-lg-1 col-md-1">
                <a href=""><i class="fa fa-skype fa-icon"></i></a>
            </div>
            <div class="col-lg-1 col-md-1">
                <a href=""><i class="fa fa-facebook-square fa-icon"></i></a>
            </div>
            <div class="col-lg-1 col-md-1">
                <a href=""><i class="fa fa-github-square fa-icon"></i></a>
            </div>
        </div>

Answer 1

试试这个，

<div class="row">
  <div class="col-xs-4 col-sm-2">
      <a href=""><i class="fa fa-behance-square fa-icon"></i></a>
  </div>
  <div class="col-xs-4 col-sm-2">
      <a href=""><i class="fa fa-linkedin-square fa-icon"></i></a>
  </div>
  <div class="col-xs-4 col-sm-2">
      <a href=""><i class="fa fa-twitter-square fa-icon"></i></a>
  </div>
  <div class="col-xs-4 col-sm-2">
      <a href=""><i class="fa fa-skype fa-icon"></i></a>
  </div>
  <div class="col-xs-4 col-sm-2">
      <a href=""><i class="fa fa-facebook-square fa-icon"></i></a>
  </div>
  <div class="col-xs-4 col-sm-2">
      <a href=""><i class="fa fa-github-square fa-icon"></i></a>
  </div>
</div>

对于移动设备（col-xs- *），每个div宽度约为33.33％（100/3）。所以它将分为两行，每列6列。对于除移动设备以外的设备（即从小型到大型设备），每个div为16.66％（100/6）。

看看这个演示， http://jsbin.com/riwiva/edit?html,output

谢谢！

社交图标的Bootstrap网格

1 个答案: