0

Не получается сделать разметку сайта с помощью Bootstrap в виде:
контейнер
хедер на всю ширину в контейнере
3 - 6 - 3
футер на всю ширину в контейнере
/контейнер
В итоге сейчас разметка занимает слишком много места, и даже на ноутбуке она не влазит в экран, и содержимое прокручивается горизонтально скроллом. И вторая строка в итоге не 3-6-3, а как-то вовсе непонятно располагается.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<body>
        <div class="container">
        <div class="row">    
        <header class="col-md-12">
            <nav class="navbar navbar-default navbar-fixed-top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" 
                                data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>                        
                        </button>
                        <a class="navbar-brand" href="#">NiceLogo</a>
                    </div>
                    <div class="collapse navbar-collapse" id="myNavbar">
                        <ul class="nav navbar-nav">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">Clients</a></li>
                            <li><a href="#">Contact Us</a></li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#"><span class="glyphicon glyphicon-user"></span>
                                Sign Up</a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>
                                Login</a></li>

                        </ul>
                    </div>
                </div>
            </nav>
        </header>
        </div>    

        <div class="row">
        <section class="col-md-3">sss</section>
        <section class="col-md-6">
            <div class="container">
               <div id="myCarousel" class="carousel slide" data-ride="carousel">
               <!-- Indicators -->
                   <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                        <li data-target="#myCarousel" data-slide-to="3"></li>
                    </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="car2.jpg" alt="paris Image 1" width="1160" height="245">
                        <div class="carousel-caption">
                            <h1>Modal Example</h1>
                            <h3>Situated on the Seine River. </h3>
                        </div>
                    </div>
                    <div class="item">
                        <img src="car2.jpg" alt="paris Image 2" width="1160" height="245">
                        <div class="carousel-caption">
                            <h1>Paris</h1>
                            <h3>Situated on the Seine River. </h3>
                        </div>
                    </div>
                    <div class="item">
                        <img src="car3.jpg" alt="paris Image 3" width="1160" height="245">
                        <div class="carousel-caption">
                            <h1>Paris</h1>
                            <h3>Paris was founded in the 3rd century BC </h3>
                            </div>
                    </div>
                    <div class="item">
                        <img src="car4.jpg" alt="paris Image 4" width="1160" height="245">
                        <div class="carousel-caption">
                            <h1>Paris</h1>
                            <h3>Paris is the home of the most visited art museum.</h3>
                            </div>
                    </div>
                </div>

                <!-- Left and right controls -->
                    <a class="left carousel-control" href="#myCarousel" role="button" 
                           data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" 
                                  aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" role="button" 
                           data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" 
                                  aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </section>
        <section class="col-md-3">sss</section>
        </div>


        <div class="row">
        <footer class="col-md-12"></footer>
        </div>
        </div>
    </body>

5
  • 1) зачем столько container? 2) напишите ссылку на ваш сайт.
    – Alex
    25 окт 2015 в 11:48
  • Сайт я только вот начал писать, на хостинг никуда не заливал. Насчет такого количества контейнеров - то тут уже просто запутался, и пытался сделать желаемое любыми методами... Собственно, два контейнера: для меню и карусели были в примере. И еще пару я прописал как в шаблонах, которые находил. 25 окт 2015 в 11:58
  • Убрал все контейнеры, по ширине все стало нормально, но почему-то во второй строке, где разметка 3-6-3, второй блок нормально отображается(6), а первый и третий(3) улетают за меню. 25 окт 2015 в 12:05
  • Хм, по прежнему второй блок нормально отображается, а первый и третий улетают за меню. 25 окт 2015 в 12:14
  • Давайте продолжим обсуждение в чате.
    – Alex
    25 окт 2015 в 12:14

1 ответ 1

1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

<body>
  <header>
    <nav class="navbar navbar-default">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
        </button>
        <a class="navbar-brand" href="#">NiceLogo</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a>
          </li>
          <li><a href="#">About Us</a>
          </li>
          <li><a href="#">Clients</a>
          </li>
          <li><a href="#">Contact Us</a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><span class="glyphicon glyphicon-user"></span>
                                Sign Up</a>
          </li>
          <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>
                                Login</a>
          </li>

        </ul>
      </div>
    </nav>
  </header>
  <div class="container">
    <div class="row">
      <div class="col-sm-3">test</div>
      <div class="col-sm-6">

        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class=""></li>
            <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="2" class=""></li>
            <li data-target="#myCarousel" data-slide-to="3" class=""></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item">
              <img src="car2.jpg" alt="paris Image 1" width="1160" height="245">
              <div class="carousel-caption">
                <h1>Modal Example</h1>
                <h3>Situated on the Seine River. </h3>
              </div>
            </div>
            <div class="item active">
              <img src="car2.jpg" alt="paris Image 2" width="1160" height="245">
              <div class="carousel-caption">
                <h1>Paris</h1>
                <h3>Situated on the Seine River. </h3>
              </div>
            </div>
            <div class="item">
              <img src="car3.jpg" alt="paris Image 3" width="1160" height="245">
              <div class="carousel-caption">
                <h1>Paris</h1>
                <h3>Paris was founded in the 3rd century BC </h3>
              </div>
            </div>
            <div class="item">
              <img src="car4.jpg" alt="paris Image 4" width="1160" height="245">
              <div class="carousel-caption">
                <h1>Paris</h1>
                <h3>Paris is the home of the most visited art museum.</h3>
              </div>
            </div>
          </div>

          <!-- Left and right controls -->
          <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>

      </div>
      <div class="col-sm-3">test</div>
    </div>


    <div>
      <footer>test</footer>
    </div>

  </div>
</body>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.