如何在 Bootstrap 中实现所需的浮动？答案

【问题标题】：How can I achieve the desired floats in Bootstrap?如何在 Bootstrap 中实现所需的浮动？
【发布时间】：2015-06-02 03:34:50
【问题描述】：

我正在尝试使用引导程序构建页面。我想创建一个我在很多营销页面上看到的布局，如下所示：

我目前正在手动设置浮动和边距并得到一些不稳定的结果。当页面调整大小时，文本不会在图像周围流动，并且不会随着窗口的变化而保持其垂直位置对齐。最后，当页面被调整大小/如果移动用户访问该页面，它应该响应如下：

图片
段落
水平尺
图片
段落
水平尺
等等……

相反，使用我当前的 HTML，我在移动设备上获得了以下内容：

图片
段落
水平尺
段落
图片
水平尺
等等……

这是我目前的代码：

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
      <img class="do-icon-left img-responsive" alt="Terminal"
           src="https://cdn4.iconfinder.com/data/icons/web-pages-seo/512/13-512.png" />
      <p class="do-feature">
        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
      </p>
    </div>
    <div class="clearfix"></div>
    <hr>
    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
      <p class="do-feature-left">
        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
      </p>
      <img class="do-icon-right img-responsive" alt="Terminal"
           src="https://cdn4.iconfinder.com/data/icons/web-pages-seo/512/13-512.png" />
    </div>
  </div>
</div>

.do-icon-left {
  float:left;
  margin-right: 100px;
  width:287px;
}
p.do-feature {
  margin-top:120px;
}
p.do-feature-left {
  float: left;
  margin-right: 100px;
  width:350px;
}
.do-icon-right {
  width: 287px;
  float:right;
}

Here's a demo in jsFiddle

我怎样才能使用 Bootstrap 类正确构建它以方便？

【问题讨论】：

你为什么要使用手动浮动？为什么不直接将col-lg-8 分解为两个col-lg-4，以便图像在一列，文本在另一列？
查看 bootstrap 的 CSS 辅助类。 getbootstrap.com/css/#helper-classes

标签： html css twitter-bootstrap

【解决方案1】：

无论您如何安排 DOM 中的项目，它们在移动视图中的显示方式都是如此。所以如果你想让图片先出现，你需要先放置图片。然后，在更宽的屏幕上将图像推或拉到一边。

为此，您需要查看column ordering 和col-*-push-* 和col-*-pull-*

堆栈片段中的演示

.circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: #278382;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<div class="container">
  <div class="row">

    <div class="col-md-2">
      <div class="circle"></div>
    </div>
    <div class="col-md-10">
      <p class="do-feature">
        The quick brown fox jumped over the lazy dog.
        The quick brown fox jumped over the lazy dog.
      </p>
    </div>

    <div class="clearfix"></div><hr/>

    <div class="col-md-2 col-md-push-10">
      <div class="circle"></div>
    </div>
    <div class="col-md-10 col-md-pull-2">
      <p class="do-feature">
        The quick brown fox jumped over the lazy dog.
        The quick brown fox jumped over the lazy dog.
      </p>
    </div>

    <div class="clearfix"></div><hr/>

    <div class="col-md-2">
      <div class="circle"></div>
    </div>
    <div class="col-md-10">
      <p class="do-feature">
        The quick brown fox jumped over the lazy dog.
        The quick brown fox jumped over the lazy dog.
      </p>
    </div>

  </div>
</div>

【讨论】：