html - 如何在 Bootstrap 中实现所需的 float ？

Question

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

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

• 图片
• 段落
• 水平规则
• 图片
• 段落
• 水平规则
• 等等...

相反，使用我当前的 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 类正确地构建它以方便使用？

Answer 1

无论您如何排列 DOM 中的元素，它们都会如何显示在移动 View 中。所以如果你想让图片先出现，你需要先放置图片。然后，在更宽的屏幕上将图像推或拉到一边。

为此，您需要查看 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>