Question

我有一个引导页面，这是完全有意义的。

但出于某种原因，当我调整浏览器大小时，其中一个div图像正在流离失所。

我的代码结构就像

<body>
  <div class="header-wrapper"> 
    -----
  </div>

  <div class="content-wrapper"> 
   ----
  </div>

  <div class="content-wrapper"> 
   ----
  </div>       
</body>

对于这些替代方案，我是否有任何应该存在的标准，或者是我的书面代码？

请建议

Answer 1

将“img-responsive”类添加到图像标签

<img src="..." class="img-responsive" alt="Responsive image">

http://getbootstrap.com/css/#images-responsive

Answer 2

如果您没有使用div.container或div.container-fluid将整个html内容包装到body标签内，则bootstrap中的某些元素在布局中不起作用。您似乎没有从共享代码中执行此操作。见下文：

<body>
 <div class="container">  <!--To wrap the doc, or conatiner-fluid for a wider container. -->
  <div class="header-wrapper"> 
  -----
  </div>
  <div class="content-wrapper"> 
  ----
  </div>
  <div class="content-wrapper"> 
  ----
  </div>
 </div>   <!--add @ end of doc -->
</body>

如果您还没有用容器包装文件，那么这将是我的第一个建议。

图像div在调整浏览器大小时变得流离失所

2 个答案: