Question

我遇到了问题，现在无法找到合适的解决方案。我想要实现的是这个（屏幕尺寸＆gt; =中等）：

columns placement

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

＆＃13;

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

＆＃13;

我根据用户屏幕大小为您提供了基本网格，其中包含我想要查看的元素。

任何帮助都会很棒。

顺便说一句：这需要在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>

Answer 2

您可以使用col-md-offset-x类来实现这一点。例如，在开头有一个gab的行：

<div class="col-md-2 col-md-offset-2">
  <img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
<div class="col-md-4">
  <img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
<div class="col-md-2">
  <img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
<div class="col-md-2">
  <img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>

请注意，您创建了一个包含5个＆＃39;位置的网格。这在标准引导程序中是不可能的，因为bootstrap的网格基于12＆＃39; （12模5 = 2）。

Answer 3

AFAIK，实现这一目标的唯一方法是使用嵌套和列偏移。此外，如果要填充整个屏幕宽度，则必须使用container-fluid。使用网格列来限制第3行的宽度。您基本上将12列网格转换为10列网格。

http://codeply.com/go/k8LNUgjaa0

<div class="row">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-11 col-md-offset-2">
                <div class="row">
                    <div class="col-md-3">

                    </div>
                    <div class="col-md-3">

                    </div>
                    <div class="col-md-6">

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

    <div class="col-md-12">
        <div class="row">
            <div class="col-md-11 col-md-offset-2">
                <div class="row">
                    <div class="col-md-3 col-md-push-3">

                    </div>
                    <div class="col-md-3 col-md-push-3">

                    </div>
                    <div class="col-md-6 col-md-pull-9">

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

    <div class="col-md-11 col-md-offset-2">
        <div class="row">
            <div class="col-md-3">

            </div>
            <div class="col-md-3">

            </div>
            <div class="col-md-3">

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

Answer 4

您好，您可以使用下面的自定义栏

<style>
    .col-md-offset-sp  { margin-left:20% }
    @media (min-width:992px) { .col-md-sp { position:relative;min-height:1px;padding-right:15px;padding-left:15px;float:left; width: 20%; }}
    @media (min-width:992px) { .col-md-2sp { position:relative;min-height:1px;padding-right:15px;padding-left:15px;float:left; width: 40%; }}
</style>

<div class="container">
    <div class="row">
        <div class="col-md-sp col-md-offset-sp"><img src="http://placehold.it/250x150" /></div>
        <div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
        <div class="col-md-2sp"><img src="http://placehold.it/500x150" /></div>

        <div class="col-md-2sp"><img src="http://placehold.it/500x150" /></div>
        <div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
        <div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>

        <div class="col-md-sp col-md-offset-sp"><img src="http://placehold.it/250x150" /></div>
        <div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
        <div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
    </div>
</div>

这里col-md-sp和col-md-2sp负责5列布局（宽度20％和40％）。而col-md-offset-sp负责5列布局的余量（余量 - 左20％）。

注意：其他规则只是从bootstrap.css文件中复制而来

Twitter Bootstrap - 列的不寻常排列

4 个答案: