Bootstrap 4.2 и мой макет и строки не центрированы по горизонтали - PullRequest
Новая
       31

Bootstrap 4.2 и мой макет и строки не центрированы по горизонтали

0 голосов
/ 12 января 2019

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

У меня есть текущий код: 

<!-- Top container -->
<div class="container">

    <!-- Sticky top for Logo + Banner + Breadcrumb -->
    <div class="row sticky-top">

        <!-- ----------------------------------------------------------- -->
        <!-- Row 1, Logo + Banner -->

        <!-- Logo -->
        <div class="row col-lg-2 bg-primary">
            Logo
        </div>

        <!-- Banner -->
        <div class="row col-lg-8 bg-warning">
            Banner
        </div>

        <!-- ----------------------------------------------------------- -->
        <!-- Row 2, Breadcrumb -->

        <!-- Breadcrumb -->
        <div class="row col-lg-10 bg-secondary">
            Breadcrumb
        </div>

    </div> <!-- Sticky top for Logo + Banner + Breadcrumb -->

    <!-- ----------------------------------------------------------- -->
    <!-- Row 3, Menu + Content -->

    <!-- Menu + Content -->
    <div class="row">

        <!-- Menu -->
        <div class="col-lg-2 bg-success">
            Menu
        </div>

        <!-- Content -->
        <div class="col-lg-8 bg-info">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>

    </div> <!-- Menu + Content -->

    <!-- ----------------------------------------------------------- -->
    <!-- Row 4, Footer -->

    <!-- Footer -->
    <div class="col-lg-10 bg-danger">
        Footer
    </div>

    <!-- ----------------------------------------------------------- -->

</div> <!-- Top container -->

Вышеприведенный макет выглядит следующим образом в Large окне просмотра:

My layout

Это выглядит очень странно, и я совсем не понимаю этого, поэтому у меня есть пара вопросов:

  • Почему 4 ряда не выровнены по горизонтали?
  • Как я могу сделать так, чтобы вся страница была горизонтально выровнена по центру?
    • Я использую только 10 столбцов из 12 в сетке Bootstrap, так как не хочу использовать всю страницу в Large окне просмотра (col-lg-2 для меню и col-lg-8 для контента)

У меня есть JSFiddle - просмотрите его в развернутом окне: http://jsfiddle.net/0tw2dk3o/

РЕШЕНИЕ как предложено @ joykal-infotech, это JSFiddle: http://jsfiddle.net/1n95jLz2/

1 Ответ

0 голосов
/ 12 января 2019

Ваш код должен выглядеть так: Jsfiddle

Вы пропустили упорядочение и форматирование классов row и column.

...