Question

我正在尝试使用Bootstrap 3制作一个简单的布局，它在笔记本电脑上看起来很好，但是当我尝试在Chrome中为Iphone 5这样的小屏幕模拟时，我的一个图像将进入下一行，尽管我期待它与标题在同一行。在视觉上，似乎有足够的空间，我尝试拉动，推动，应用更紧，但无法让它工作。

有人可以帮忙指出我在这里做错了吗？

enter image description here

<html>
  <head>
    <title></title>
  </head>
  <body>
    <div class="container">
      <div class="col-md-4 column"></div>
      <div class="col-md-4 column"></div>
      <div class="col-md-4 column">
        <div class="row clearfix">
          <div class="col-md-6 column">
            <img alt="300x200" src="images/loc.png" style="padding-top:15pt;height:auto;max-width:35px" />
          </div>
          <div class="col-md-6 column">
            <h2>Venue 2015</h2>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

col-md- *类仅适用于992px到1200px的屏幕尺寸 - 如果您想在小型显示器上使用2列布局，请添加col-xs- *类。

在你的情况下：

<div class="row clearfix">
   <div class="col-md-6 col-xs-6 column">
     <img alt="300x200" src="images/loc.png" style="padding-top:15pt;height:auto;max-width:35px" />
   </div>
   <div class="col-md-6 col-xs-6 column">
      <h2>Venue 2015</h2>
   </div>
</div>

Answer 2

如果屏幕尺寸小于特定尺寸，您可以在Javascript中编写一个指定特定元素（较小）尺寸的函数。完整大小的图像仍然会加载，但脚本会告诉它加载宽度更小的宽度和高度，以适应更小的屏幕尺寸。

列跳到Bootstrap中的小设备上的下一行

2 个答案: