Почему моя сетка bootstrap не работает? - PullRequest
Новая
       28

Почему моя сетка bootstrap не работает?

0 голосов
/ 29 марта 2020

Я не понимаю, почему моя сеточная система отображается не так, как ожидалось.

Html код: 

<header class="navbar navbar-dark navbar-expand bd-navbar bg-dark p-0 shadow">
    <div class="col-sm-12 col-md-12 col-lg-12">
        <div class="col-sm-12 col-md-12 col-lg-3 text-sm-center text-md-center text-lg-left">
            <a class="navbar-brand"><!-- img src is django code, ignore it-->
                <img src="{% static 'images/logo.jpg' %}" class="rounded-circle" style="height:30px;width:30px;">
                <label style="font-family: 'Oswald', 'DejaVu Sans Mono' !important; color:white;">Title</label>
            </a>
        </div>

        <div class="col-sm-12 col-md-12 col-lg-9 text-sm-center text-md-center text-lg-left">
            <!--my form here-->
        </div>
    </div>
</header>

Здесь важен союз lg. Вы можете видеть, как у меня есть div с 12 столбиками, внутри которого два элемента div, один с 3 столбиками, а другой с 9 (так что они дополнительно дают 12). Ожидается увидеть их, как объяснено в Сетка - Bootstrap. Но результат, который я получаю, это ...

=)

Почему ??? !!! Спасибо!

1 Ответ

1 голос
/ 29 марта 2020

Ваши col <div> s должны быть помещены в строку <div> s следующим образом: 

<div class="row">
  <div class="col-9"></div>
  <div class="col-3"></div>
</div>
...