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：我没有足够的代表发布图片所以＃在引号之间输入img src值

Answer 1

这个答案仅针对Bootstrap 4。

您的代码存在两个问题。

您要关联的图片大于其容器的宽度。
*-xs-*类被删除。

解决方案

添加.img-fluid类以使图像响应。
分别使用col-8和col-4课程代替col-xs-8和col-xs-4。

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

＆＃13;

<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>

＆＃13;

运行代码段或检查此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>

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

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

移动视图和桌面视图中的Bootstrap抓握

2 个答案:

这个答案仅针对Bootstrap 4。

解决方案

这个答案仅针对Bootstrap 3。