Bootstrap Grid System Выравнивание

Question

Я пытаюсь создать страницу профиля, используя систему сетки Bootstraps, она будет работать отлично, но, к сожалению, у моей страницы есть еще одна динамическая функция - меню появляется с левой стороны в больших разрешениях.

Это меню влияет на столбцы, поскольку сетка считает, что она не сдвинута вправо, и они растягиваются со страницы! Когда меню перемещается вверх при меньшем разрешении, Bootstrap делает свое дело правильно. Смотрите http://hertfordhotshots.weebly.com/honors.html и поиграйтесь с шириной, чтобы увидеть мою проблему.

Что я могу сделать, чтобы загрузчик дал мне желаемый эффект и оставил меню слева?

Спасибо за вашу помощь!

Answer 1

Может быть, это работает... в html-фрагменте внутри class="team"... устранить class="container" и class="row"... вместо этого добавьте 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>