移动视图和桌面视图中的引导网格

Question

<div class="container-fluid">
<div class="row">
   <div class="col-xs-8 col-md-8 col-sm-8">
      <img src="#"/>  
   </div>
   <div class="col-xs-4 col-md-4 col-sm-4">
      <blockquote>
         <p style="font-size:20px; color:black;">"I had never seen anything in the least like them before. A single look at them is enough to show that they could only be written by a mathematician of the highest class. They must be true because, if they were not true, no one would have the imagination to invent them."</p>
         <footer><cite>Anonymous</cite></footer>
      </blockquote>
   </div>
</div>

您好，在上面的代码中，我正在尝试将文本和图像并排显示，在桌面上查看时我得到了预期的输出，但在移动设备上查看时是同一页面我看到部分文本和图像重叠但相同在桌面视图中在移动设备中查看时页面正常。

如何将所有视图中的外观同步在一起？

任何指针都会有所帮助。

谢谢。

PS：我没有足够的代表来发布图片，所以在引号之间#'ing img src 值

Answer 1

此答案仅适用于 Bootstrap 4。

您的代码有两个问题。

1. 您要链接的图片大于其容器的宽度。
2. *-xs-* 类已删除。

解决方案

1. 添加.img-fluid 类以使图像响应。
2. 分别使用col-8 和col-4 类而不是col-xs-8 和col-xs-4。

由于您的所有breakpoints 都相同，因此仅使用col-8 和col-4 就足够了。您最好删除其他 col-*-* 类。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-8">
      <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/5/51/Augusta_National_Golf_Club%2C_Hole_10_%28Camellia%29_-_cropped.jpg" />
    </div>
    <div class="col-4">
      <blockquote>
        <p style="font-size:20px; color:black;">"I had never seen anything in the least like them before. A single look at them is enough to show that they could only be written by a mathematician of the highest class. They must be true because, if they were not true, no one would have the
          imagination to invent them."</p>
        <footer><cite>Anonymous</cite></footer>
      </blockquote>
    </div>
  </div>

运行代码 sn-p 或检查pen on Codepen

Answer 2

此答案仅适用于 Bootstrap 3。

根据上面的代码，我怀疑您的问题是您链接到的img 大于其容器的宽度。最简单的解决方法是使用 Bootstrap 的实用程序类.img-responsive向图像添加一些响应行为@

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <img src="http://placehold.it/800x800" class="img-responsive" />  
    </div>

    <div class="col-xs-4">
      <blockquote>
        <p style="font-size:20px; color:black;">"I had never seen anything in the least like them before. A single look at them is enough to show that they could only be written by a mathematician of the highest class. They must be true because, if they were not true, no one would have the imagination to invent them."</p>
        <footer><cite>Anonymous</cite></footer>
      </blockquote>
   </div>
</div>

在上面的代码中，我们有一个 800 像素的方形图像，但 imp-responsive 类总是将其 max-width 强制为其容器的 100%。

对您的代码进行的另一项更改：如果它们的值相同，则无需指定其他断点。您的col-xs-8 col-sm-8 col-md-8 与仅使用col-xs-8 相同。