Bootstrap col-md-offset- * не работает

Я пытаюсь добавить класс смещения Bootstrap в свой код, чтобы достичь диагонального выравнивания следующим образом:

Но я не знаю, какое смещение я должен использовать. Я пробовал пару смещений, чтобы достичь этого, но не использовать. Текст охватывает весь jumbotron.Here мой код

Html:

<div class="jumbotron">
        <div class="container">
            <div class="row">
                <div>
                    <h2 class="col-md-4 col-md-offset-4">Browse.</h2>
                    <h2 class="col-md-4 col-md-offset-4">create.</h2>
                    <h2 class="col-md-4 col-md-offset-4">share.</h2>
                </div>
            </div>
        </div>
    </div>

CSS

.jumbotron {
    height: 500px;
    width: 100%;
    background-image: url(img/bg.jpg);
    background-size: cover;
    background-position: center;
}

.jumbotron h2 {
    color: white;
    font-size: 60px;
}

.jumbotron h2:first-child {
    margin: 120px 0 0;
}

Пожалуйста, направляйте меня. Спасибо заранее.

Ответы

Ответ 1

Я бы не рекомендовал использовать Grid-систему в этом экземпляре, а также просто добавить добавленное дополнение для каждого <h2>. При этом способ достижения этого с помощью col-*-offset-* будет следующим:

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>One</h2>
            </div>

            <div class="col-md-11 col-md-offset-1">
                <h2>Two</h2>
            </div>

            <div class="col-md-10 col-md-offset-2">
                <h2>Three</h2>
            </div>
        </div>
    </div>
</div>

По существу первая строка должна охватывать всю строку (так -12). Вторая строка должна быть смещена на 1 столбец, поэтому вы смещаете на 1 и получаете общую ширину 11 столбцов (11 + 1 = 12) и так далее. Ваше смещение всегда достаточно, чтобы гарантировать, что общее количество столбцов равно 12.

Ответ 2

Он работает в начальной загрузке 4, в документации произошли некоторые изменения. Нам не нужен префикс col-, просто offset-md-3, например

<div class="row">
   <div class="offset-md-3 col-md-6"> Some content...
   </div>
</div>

Здесь док.

Ответ 3

Изменение col-md-offset-* до offset-md-* работало для меня

Ответ 4

проверьте bootply

это неправильно, потому что bootstrap с использованием margin-left: **%

.jumbotron h2:first-child {
   margin: 120px 0 0;
}

Ответ 5

Должно быть:

<h2 class="col-md-4 col-md-offset-1">Browse.</h2>
<h2 class="col-md-4 col-md-offset-2">create.</h2>
<h2 class="col-md-4 col-md-offset-3">share.</h2>

Ответ 6

Где проблема

В вашем HTML все h2 имеют одинаковый набор из 4 столбцов, поэтому они не будут создавать диагональ.

Как исправить его

A row имеет 12 столбцов, поэтому мы должны поместить каждый h2 в свой собственный row. У вас должно быть что-то вроде этого:

<div class="jumbotron">
    <div class="container">
        <div class="row">
                <h2 class="col-md-4 col-md-offset-1">Browse.</h2>
        </div>
        <div class="row">
                <h2 class="col-md-4 col-md-offset-2">create.</h2>
        </div>
        <div class="row">
                <h2 class="col-md-4 col-md-offset-3">share.</h2>
        </div>
    </div>
</div>

Альтернативой является создание каждой строки h2 width plus offset 12 столбцов, поэтому каждый из них автоматически обертывается в новую строку.

<div class="jumbotron">
    <div class="container">
        <div class="row">
                <h2 class="col-md-11 col-md-offset-1">Browse.</h2>
                <h2 class="col-md-10 col-md-offset-2">create.</h2>
                <h2 class="col-md-9 col-md-offset-3">share.</h2>
        </div>
    </div>
</div>

Ответ 7

Бутстрап 4 смещенных класса удалены в бета-версии 1, но будут восстановлены в бета-версии 2 - ссылка на тему

Ответ 8

На данный момент, если вы хотите, например, переместить столбец всего на 4 столбца, я бы предложил использовать только фиктивный placeholder, как в моем примере ниже

<div class="row">
      <div class="col-md-4">Offset 4 column</div>
      <div class="col-md-8">
            //content
      </div>
</div>

Ответ 9

Если у вас все в порядке с небольшой настройкой - мы знаем, что загрузчик работает с шириной 12

<div class="row">
      <div class="col-md-1">
            Keep it blank it becomes left offset
      </div> 
      <div class="col-md-5">
      </div>
      <div class="col-md-5">
      </div>
      <div class="col-md-1">
            Keep it blank it becomes right offset
      </div
</div>

Я уверен, что есть лучший способ сделать это, но я спешил, поэтому использовал этот трюк