html - Bootstrap 网格定位

Question

自举网格

我在使用 Bootstrap 网格系统时遇到问题，无法按我想要的正确方式接缝放置我的内容。这是我目前所拥有的。

---

 <header>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2"><img src="logo.png" alt="" class="img-responsive"/></div>
      <div class="col-md-2"><h3>My Website</h3></div>
    </div>
  </div>
</header>

目标

我想要实现的是为大型桌面提供一个全宽网页，并为移动设备提供响应式网页，其中 Logo 图像和“我的网站”标语位于左侧，内容位于中心。这是我想在桌面和移动设备上实现的一些图像 http://s16.postimg.org/tbt4b5det/Untitled_1.png - 桌面 http://s10.postimg.org/mbijfjvkp/Untitled_2.png - 移动的检查下面有什么:

 <section>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <img src="/logo.png" alt="" class="img-responsive"/>
      </div>
      <div class="col-md-6 col-md-offset-3"><h4>Welcome</h4></div>
      <div class="col-md-6 col-md-offset-3"><h4>How are you?</h4></div>
      <div class="col-md-6 col-md-offset-3">
        <div class="disclaimer">
          <p>Some text here</p>
        </div>
        <div class="link">
          <span>Follow Us</span>
        </div>
      </div>
    </div>
  </div>
</section>

其他问题

每次我测试不同的设备或简单地调整浏览器大小时，它都会接缝，图像变得非常小，直到它到达 sm 设备，然后再次继续变小。

谢谢

感谢您的帮助，我是 Web 开发的新手，欢迎提出任何建议。

Answer 1

我的方法是将容器类更改为 <div class="container-fluid" style="text-align:left;">允许屏幕的全宽使用。

然后，只要放一个<div style="text-align: center;">围绕您想要居中的内容。

虽然这会使所有元素拉伸(stretch)整个屏幕宽度，包括 col-*-*类。只需添加 col-*-offset-*根据需要对此进行调整。

由于 img-responsive 类，您的 img 越来越小。