Почему col-xl-10 не работает при указании col-md-8?

Question

[Галина Баграм]

Добрый день!
хочу сделать адаптивный дизайн с помощью bootstrap.
указываю по очереди классы, вроде все по инструкции. по почему-то при указании col-md-8 col-xl-10.
класс col-xl-10 не отрабатывает. выводится, как col-md-8.

кусок кода прилагаю

<header>
      <div class="container">
            <div class="heading clearfix">
 <div class="Btn-group col-8 col-sm-6 col-md-8 col-lg-8 col-lx-10">
<button type="button" class="btn btn-outline-light btn-sm me-5 fs-2" style="width: 8em;">
  <a href="#1">о нас </a>
</button>
<button type="button" class="btn btn-outline-light btn-sm me-5 fs-2" style="width: 8em;" >
	<a href="#3">портфолио </a>
</button>

<button type="button"  class="btn btn-outline-light btn-sm me-5 fs-2" style="width: 8em;">
	 <a href="#2">услуги </a>
</button>
<button type="button" class="btn btn-outline-light btn-sm fs-2" style="width: 8em;">
	<a href="#4">контакты </a>
</button>
</div>
<img src="img/redlogo1.png" alt="foxprint" class="logo col-md-2 col-lg-2"  >
</div>
</header>

Заранее благодарю за ответ

Answer 1

[Dmitry Bay]

col-8 col-sm-6 col-md-8 col-lg-8 col-lx-10

наоборот классы сделайте.

Comments

[Dmitry Bay]

2 - col-8 col-sm-6 col-md-8 col-lg-8 col-lx-10
в div.row должно быть.

[Dmitry Bay]

3 - Btn-group скорее всего некорректное название класса. (регистр проверяйте)

4-
вот пример вам, блоки посмотрите по документации.

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="p-3 bg-primary text-white">Первая колонка</div>
            <div class="row mt-3">
                <div class="col-6">
                    <div class="p-2 bg-secondary text-white">Вложенная 1</div>
                </div>
                <div class="col-6">
                    <div class="p-2 bg-secondary text-white">Вложенная 2</div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="p-3 bg-warning text-dark">Вторая колонка</div>
        </div>
    </div>
</div>

Answer 2

[ThunderCat]

Принцип построения блоков в бутстрап описан в документации, а вы прочитали 3 рандомные странички и пытаетесь по ним что-то построить. Каждый адаптивный блок должен быть заключен в row, а внутри уже можно располагать какое-то количество col элементов.

Так же вся адаптивная страничка должна содержать container, задающий ширину адаптива.