Привет, ребята, я впервые пытаюсь создать веб-сайт с начальной загрузкой и пытаюсь разобраться в базовом макете. Однако сейчас у меня две проблемы.

1-й Мое основное тело, которое я покрасил в белый цвет, находится не в середине страницы. Я пытаюсь сделать так, чтобы главная страница выглядела примерно так:

 -----------------------------------------------
|    |                          |              |
|-----------------------------------------------                        
|    |Logo               Nav Bar|              |
|-----------------------------------------------                        
|    |                           |             |
|    |                           |             |
|    |      Body                 |             |
|    |                           |             |
|    |                           |             |
|-----------------------------------------------                        
|    |Logo          Info        |              |
|-----------------------------------------------                        
|    |                          |              |
 -----------------------------------------------

Однако по какой-то причине тело застряло слева, а не посередине.

Моя вторая проблема - это панель навигации вверху. Поскольку он не застревает прямо наверху, это означает, что когда я прокручиваю, белое тело будет перекрывать его, когда я опускаюсь, и это большая проблема. Если панель навигации застряла прямо наверху, это не проблема, однако я бы хотел, чтобы моя панель навигации находилась не наверху, а на 80 пикселей вниз.

Любая помощь в этом была бы великолепна.

HTML:

<div class="mainHome">
    <div class="container">
    </div>
</div>

CSS:

2
Nevershow2016 19 Фев 2016 в 20:00

2 ответа

Лучший ответ

Хорошо, попробуй это.

<div class="container" id="main-container">
  <div class="row">
    <div class="col-md-12">
      <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <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 class="logo">
              <img src="Image/Logo.png" class="img-responsive"/>
            </div>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Home</a>
              </li>
              <li><a href="#about">About</a>
              </li>
              <li><a href="login.php">Login</a>
              </li>
              <li><a href="#about">Become A member</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="mainHome">
          <div class="container">
          </div>
      </div>
      <div class="footer">
        <div class="container">   
          <div class="navbar-text pull-left">
            <p> &copy 2016 </p>
          </div>
          <div class="navbar-text pull-right">
            <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
            <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
            <a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

И добавьте этот CSS:

body {
  text-align: center;
}

#main-container {
  text-align: left;
  margin: 0 auto;
}

Удачи!

1
mtpbzz 19 Фев 2016 в 17:58

Bootstrap требует, чтобы все содержимое находилось внутри содержащего элемента, который может иметь класс «контейнер» или «контейнер-жидкость». Оттуда вам нужно использовать систему сетки Bootstrap, используя строки, а затем столбцы. Итак, ваша структура будет иметь вид:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            /* content here */
        </div>
    </div>
</div>

Таким образом, в вашем коде класс «контейнер» должен быть самым внешним подразделением, а все остальное внутри него.

Вы можете узнать об основах системы сеток Bootstrap здесь http://getbootstrap.com/css/#overview -контейнер

1
andydavies 19 Фев 2016 в 17:54