Question

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

除了在大屏幕上移动图像，在小屏幕上，我还希望它在第二段下移动。我不知道这是否可行;这是隐藏式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>

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

1 个答案: