html - Twitter Bootstrap - 列的不寻常排列

Question

我有一个问题，我现在找不到好的解决方案。我想要实现的是这个(屏幕尺寸 >= 中等):

在黑盒子里会有图像。白色代表用户屏幕 View 。我希望这两个水平框完全适合屏幕边缘。

<link href="http://cdn.jsdelivr.net/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img class="img-responsive" src="http://placehold.it/1920x300&text=1" alt="" />
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img class="img-responsive" src="http://placehold.it/1920x300&text=2" alt="" />
    </div>
    
    <div class="clearfix visible-sm-block"></div>
    
    <div class="col-xs-12 col-sm-6 col-md-4">
      <!-- make it span to the right edge of the screen on resolution >= medium -->
      <img class="img-responsive" src="http://placehold.it/1920x300&text=3" alt="" />
    </div>
    
    <div class="col-xs-12 col-sm-6 col-md-4">
      <!-- make it span to the left edge of the screen on resolution >= medium -->
      <img class="img-responsive" src="http://placehold.it/1920x300&text=4" alt="" />
    </div>
    
    <div class="clearfix visible-sm-block"></div>
    
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img class="img-responsive" src="http://placehold.it/1920x300&text=5" alt="" />
    </div>
    <div class="hidden-xs col-sm-6 col-md-4">
      <img class="img-responsive" src="http://placehold.it/1920x300&text=6" alt="" />
    </div>
    
    <div class="clearfix visible-sm-block"></div>
    
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img class="img-responsive" src="http://placehold.it/1920x300&text=7" alt="" />
    </div>
    <div class="hidden-xs hidden-sm col-md-4">
      <img class="img-responsive" src="http://placehold.it/1920x300&text=8" alt="" />
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img class="img-responsive" src="http://placehold.it/1920x300&text=9" alt="" />
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-xs-12">some more content that is in container class, the total width of those three images above should be equal to this container so it fits nicely</div>
  </div>
</div>

我为您提供了基本网格，其中包含我希望根据用户屏幕尺寸查看的元素。

任何帮助都会很棒。

顺便说一句:这需要在 container 中，因为这些图像的上方和下方会有内容，并且需要以某种方式对齐以保持一致。

Answer 1

我认为这对你有用

<div class="container">
  <div class="row">
    <div class="col-sm-2 col-sm-offset-3"></div>
    <div class="col-sm-2"></div>
    <div class="col-sm-4"></div>
  </div>

  <div class="row">
    <div class="col-sm-4 col-sm-offset-1"></div>
    <div class="col-sm-2"></div>
    <div class="col-sm-2"></div>
  </div>

  <div class="row">
    <div class="col-sm-2 col-sm-offset-3"></div>
    <div class="col-sm-2"></div>
    <div class="col-sm-2"></div>
  </div>
</div>