Bootstrap 网格系统对齐

Question

我正在尝试使用 Bootstraps 网格系统创建一个个人资料页面，它可以完美地工作，但不幸的是我的页面有另一个响应式动态功能 - 一个菜单出现在左侧以更大的分辨率.

这个菜单正在影响列，因为网格认为它没有被推到右边，它们正在蔓延到页面之外！当菜单以较小的分辨率移动到顶部时 Bootstrap 会正确执行它的操作。请参阅 http://hertfordhotshots.weebly.com/honors.html 并调整宽度以查看我的问题。

有什么办法可以让bootstrap达到我想要的效果并让菜单保持在左侧吗？

感谢您的帮助！

Answer 1

这可能有效...在 class="team" 内的 html 狙击... 消除 class="container" 和 class="row"...相反，在两个 div 中添加 class="col-lg-12 col-md-12 col-sm-12 col-xs-12 "...

    <section class="team">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">//class="container
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">//class="row"
         <div class="col-md-10 col-md-offset-1">
          <div class="col-lg-12">
            <h6 class="description">CURRENT TEAM</h6>
            <div class="row pt-md">
              <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 profile">
               <div class="img-box">
                 <img src="http://placehold.it/600x600" class="img-responsive">
                <ul class="text-center">
                   <a href="#"><li><i class="fa fa-facebook"></i></li></a>
                   <a href="#"><li><i class="fa fa-twitter"></i></li></a>
                   <a href="#"><li><i class="fa fa-linkedin"></i></li></a>
                </ul>
              </div>
          <h1>Joe McClemont</h1>
          <h2>Co-founder/ Midfielder</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
       ...
   ...
   ...
    </div>
  </div>
</div>

Bootstrap 网格系统对齐

Bootstrap Grid System Alignment

grid

dynamic

alignment

width

twitter-bootstrap