Bootstrap 3 - 图像和文本浮动到响应列的相对两侧答案

【问题标题】：Bootstrap 3 -Images and text floated to opposite sides of a responsive columnBootstrap 3 - 图像和文本浮动到响应列的相对两侧
【发布时间】：2013-11-15 15:35:24
【问题描述】：

我查看并没有发现我的具体问题。我正在尝试构建一个响应式网页，其 lg 布局有 12 个图像，其下方有文本，med 和 sm 布局，文本和图片彼此相邻，以及 xs 布局，图像再次位于文本上方。

我无法让图片和段落在列中并排放置。我尝试过 push-x、pull-x、offset-x、媒体查询，其中我为每个 .img 和 .p 制作了一个 div 并使它们浮动。

我确信有一种简单的方法可以做到这一点，但这是我使用 Bootstrap 的第一周，我想不通。这是怎么做到的？

这是我的代码示例：

    <div class="row">
        <div class="content col-lg-2 col-md-4 col-sm-6 col-xs-12">
          <h2>Fork and Spoon</h2>
          <div class="frame1"><img class="img-responsive" src="./images/spork.jpg" alt="Spork"></div>
          <p>We are the <em>spork of the party!</em>  Yes, we've endured most every cutting remark; just don't refer to my wife as "flatware" and she is happy. </p>
          <p><a class="btn btn-default" href="#">More utensils here &raquo;</a></p>
        </div>

【问题讨论】：

标签： html image css responsive-design twitter-bootstrap-3

【解决方案1】：

在较大的网格内放置一个网格。下面的代码，工作示例http://bootply.com/91851

<div class="row">
  <div class="content col-lg-2 col-md-4 col-sm-6">
    <h2>Fork and Spoon</h2>
    <div class="row">
      <div class="col-lg-12 col-sm-6">
        <img class="img-responsivet" src="./images/spork.jpg" alt="Spork">
      </div>
      <div class="col-lg-12 col-sm-6">
        <p>We are the <em>spork of the party!</em>  Yes, we've endured most every cutting remark; just don't refer to my wife as "flatware" and she is happy. </p>
      </div>
    </div>
    <p><a class="btn btn-default" href="#">More utensils here »</a></p>
  </div>
  ...repeat...
</div><!--/row-->

另外请注意，您不需要显式设置.col-xs-12，因为如果您根本不设置 col-xs，这是默认设置。

【讨论】：