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

Question

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

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

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

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;

}

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

750 9

html css twitter-bootstrap

9 ответов:

Comments

Ничего не найдено.

Robert · Accepted Answer · 2016-07-13 20:04:29

Я бы не рекомендовал использовать сеточную систему в этом случае, а просто добавить увеличенное заполнение для каждого <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>
По существу, первая строка должна охватывать всю строку (so -12). Вторая строка должна быть смещена на 1 столбец, поэтому вы смещаете на 1 и даете ей общую ширину 11 столбцов (11+1 = 12) и так далее. Вашего смещения всегда достаточно, чтобы гарантировать, что общее количество столбцов равно 12.

Vasyl Gutnyk · Accepted Answer · 2017-05-03 15:59:07

Он работает в bootstrap 4, там были некоторые изменения в документации.Нам не нужен префикс col -, просто offset-md-3 например
<div class="row">
   <div class="offset-md-3 col-md-6"> Some content...
   </div>
</div>
/ / здесь док: http://v4-alpha.getbootstrap.com/layout/grid/#example-offsetting-columns

sriram26 · Accepted Answer · 2017-07-23 20:58:51

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

Cem Arguvanlı · Accepted Answer · 2016-07-13 19:49:53

Проверьте это bootply

Это неверно, потому что bootstrap использует margin-left:* * %
.jumbotron h2:first-child {
   margin: 120px 0 0;
}

Mr Geek · Accepted Answer · 2016-07-13 19:36:50

Должно быть:

<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>

Daniele Barresi · Accepted Answer · 2016-07-13 21:21:50

Где проблема

В вашем 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 плюс смещение суммой 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>

user947668 · Accepted Answer · 2017-09-30 17:14:41

Классы смещения Bootstrap 4 были удалены в бета-версии 1, но будут восстановлены в бета-версии 2 - Ссылка на тему

lionelsanou · Accepted Answer · 2018-01-19 23:52:34

На данный момент, если вы хотите переместить столбец только на 4 единицы столбца, например, я бы предложил использовать только фиктивный заполнитель, как в моем примере ниже
<div class="row">
      <div class="col-md-4">Offset 4 column</div>
      <div class="col-md-8">
            //content
      </div>
</div>

Karthik Sagar · Accepted Answer · 2018-03-15 09:09:25

Если вы в порядке с небольшой настройкой - мы знаем, что bootstrap работает с шириной 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>
Я уверен, что есть лучший способ сделать это, но я спешил, поэтому использовал этот трюк