Bootstrap - 关于移动和大屏幕移动图像的基本问题

Question

我仍在学习 Twitter-bootstrap 的基础知识，并继续使用我从 Codeacademy 采用的网站布局。我的问题：在大屏幕上，我希望图像移动到最右边居中，其余文本在大屏幕上移动到左侧。我很困惑为什么我的结构不起作用，因为我将图像添加到一个新的 div 类但在同一行中，所以这不应该把它放在空白文本的右侧吗？

除了在大屏幕上移动图像，在小屏幕上，我还希望它移动到第二段下方。我不知道这是否可能；这是 hidden-sm-down 实用程序最好的做法吗？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="about col-xs-12 col-lg-6">
      <h1>About Me</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</p>

      <div class="about col-xs-12 col-lg-6 pull-right hidden-sm-down">
        <img src="http://placehold.it/150x150" class="img-responsive img-circle" alt="" />
      </div>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor...
      </p>

      <blockquote class="blockquote-reverse">
        <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor...</h3>
      </blockquote>

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

这是它现在的样子和我想要的样子（蓝色）：

http://imgur.com/HLqtK2s

此外，我可以对图像做些什么来确保图像缩放到足够小，以使整个页面整齐地放在 iPhone 屏幕上？

Answer 1

您正在嵌套列...您应该将 <div class="col-* 移动到相邻的 div... 像这样：

<div class="container-fluid">
  <div class="row">
    <div class="about col-xs-12 col-lg-6">
      <h1>About Me</h1>
      ...
    </div>
    <div class="about col-xs-12 col-lg-6">
        <img src="..."/>
    </div>
  </div>
</div>