Bootstrap 3 - горизонтальный скролл при row внутри container

265

14 апреля 2018, 17:30

Использую bootstrap 3, у страницы появляется горизонтальный скролл. Если убрать какую-то одну секцию (section) - он исчезает. Если применить section{margin-left: -15px;} - тоже исчезает. Все row обернуты в container, initial-scale=1. Код проверила валидатором, незакрытых тэгов нет. Очень хочу понять, почему такое поведение у страницы и в чем я ошиблась.

.main-top { 
  width: 100vw; 
} 
 
.navbar-nav>li>a>img { 
  width: 40px; 
} 
 
.menu { 
  width: 100%; 
  display: flex; 
} 
 
.menu>li { 
  margin: auto; 
} 
 
.carousel-inner>.item>img, 
.carousel-inner>.item>a>img { 
  width: 100%; 
} 
 
.carousel-control { 
  width: 5%; 
} 
 
.insta-pic img { 
  width: 50%; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
  <title>...</title> 
 
  <!-- Bootstrap core CSS --> 
  <link href="css/bootstrap.min.css" rel="stylesheet"> 
  <link href="css/bootstrap-theme.min.css" rel="stylesheet"> 
 
  <!-- Custom styles for this template --> 
  <link href="css/style.css" rel="stylesheet"> 
</head> 
 
<body> 
  <section> 
    <div class="navbar navbar-static-top" role="navigation"> 
      <div class="main-top"> 
        <div class="container"> 
          <div class="navbar-header"> 
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
            <span class="sr-only">Toggle navigation</span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
          </button> 
          </div> 
          <div class="collapse navbar-collapse"> 
            <ul class="nav navbar-nav"> 
              <li class="active"> 
                <a href="#"><img src="images/insta.png" /></a> 
              </li> 
              <li> 
                <a href="#about"><img src="images/email.png" /></a> 
              </li> 
              <li> 
                <a href="#contact"><img src="images/vk.png" /></a> 
              </li> 
              <li> 
                <a href="#contact"><img src="images/facebook.png" /></a> 
              </li> 
              <li> 
                <a href="#contact"><img src="images/youtube.png" /></a> 
              </li> 
            </ul> 
            <ul class="nav navbar-nav navbar-right"> 
              <li> 
                <a href="#about" style="text-transform: uppercase;display: -webkit-inline-box;font-size: 18px;"><img src="images/cart.png" style="width: 32px;" /> 
                  <p style="padding: 0px 10px;margin:0;">Корзина></p> 
                </a> 
              </li> 
            </ul> 
          </div> 
          <!--/.nav-collapse --> 
        </div> 
      </div> 
 
      <div class="container"> 
        <div class="text-center"> 
          <a href=""><img src="images/logo.png"></a> 
        </div> 
        <!--/.nav-collapse --> 
      </div> 
 
      <div class="container"> 
        <div class="collapse navbar-collapse"> 
          <ul class="nav navbar-nav menu"> 
            <li class="active"><a href="#">Menu1</a></li> 
            <li><a href="#about">Menu1</a></li> 
            <li><a href="#contact">Menu1</a></li> 
            <li><a href="#contact">Menu1</a></li> 
            <li><a href="#contact">Menu1</a></li> 
            <li><a href="#contact">Menu1</a></li> 
          </ul> 
        </div> 
        <!--/.nav-collapse --> 
      </div> 
 
    </div> 
    <!--/.navbar-static-top --> 
 
  </section> 
  <section> 
 
    <div class="container"> 
 
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
        <!-- Indicators --> 
        <ol class="carousel-indicators"> 
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
          <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
          <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
        </ol> 
 
        <!-- Wrapper for slides --> 
        <div class="carousel-inner"> 
          <div class="item active"> 
            <img src="images/s1.png" alt="..."> 
          </div> 
 
          <div class="item"> 
            <img src="images/s1.png" alt="..."> 
          </div> 
 
          <div class="item"> 
            <img src="images/s1р.png" alt="..."> 
          </div> 
        </div> 
 
        <!-- Controls --> 
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
          <span class="glyphicon glyphicon-chevron-left"></span> 
        </a> 
        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
          <span class="glyphicon glyphicon-chevron-right"></span> 
        </a> 
      </div> 
 
    </div> 
    <!-- /.container --> 
  </section> 
  <section> 
    <div class="container"> 
      <div class="row" style="margin-top:30px;"> 
        <div class="col-md-6"><img style="width: 100%;" src="images/i1.png"></div> 
        <div class="col-md-6"><img style="width: 100%;" src="images/i2.png"></div> 
      </div> 
 
      <div class="row" style="margin-top:30px;"> 
        <div class="col-md-3"><img style="width: 100%;" src="images/i3.png"></div> 
        <div class="col-md-3"><img style="width: 100%;" src="images/i4.png"></div> 
        <div class="col-md-6"> 
          <div class="col-md-12" style="text-align:center;"><img style="width: 50%;" src="images/instagram.png"></div> 
          <div class="col-md-12 insta-pic"> 
            <p class="lead" style="text-align:center;color:#777;">@instagram</p> <img src="images/instagram-item.png"><img src="images/instagram-item.png"><img src="images/instagram-item.png"></div> 
        </div> 
 
      </div> 
    </div> 
    <!-- /.container --> 
  </section> 
  <!-- Bootstrap core JavaScript 
    ================================================== --> 
  <!-- Placed at the end of the document so the pages load faster --> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
  <script src="js/bootstrap.min.js"></script> 
</body> 
 
</html>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как сверстать круглый блок с иконками внутри?

Подскажите, пожалуйста, как сверстать такое расположение иконок? Если приглядеться, там по окружности (белый фон с несколькими кругами) расположены...

269

HTML

Bootstrap 3 - горизонтальный скролл при row внутри container

Как сверстать круглый блок с иконками внутри?

Почему линия рисуется не правильно?

Как реализовать такую рамку на html/сcs?

Позиционирование CSS [требует правки]