Як додати вершину поля до class="row"елементів, використовуючи рамки завантаження завантажувача?

Редагування або переосмислення рядка у завантажувальній програмі Twitter - погана ідея, оскільки це основна частина скелета сторінки і вам знадобляться рядки без верхнього поля.

Щоб вирішити це, натомість створіть новий клас "топ-буфер", який додає необхідний стандартний запас.

.top-buffer { margin-top:20px; }

А потім використовуйте його у рядках divs, де вам потрібен верхній запас.

<div class="row top-buffer"> ...

Гаразд, щоб повідомити вам, що сталося тоді, я виправив за допомогою нових класів, як говорить Асіра вище:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

коли я хочу, я роблю <div class="row top7"></div>

для кращого реагування ви можете додати margin-top:7%замість, 5pxнаприклад: D

Завантаження 3

Якщо вам потрібно відокремити рядки в завантажувальному інструменті, ви можете просто скористатися .form-group. Це додає 15px поля в нижній частині рядка.

У вашому випадку, щоб отримати верх маржа, ви можете додати цей клас до попереднього .rowелемента

<div class="row form-group">

/* From bootstrap.css */
.form-group {
        margin-bottom: 15px;
}

Завантаження 4

Можна використовувати вбудовані класи інтервалу

<div class="row mt-3"></div>

"T" у назві класу примушує його застосовуватися лише до "верхньої" сторони, є подібні класи для нижньої, лівої, правої. Число визначає розмір простору.

Для Bootstrap 4 слід застосувати інтервал за допомогою

скорочені класи корисності

у такому форматі:

{властивість} {сторін} - {розмір}

Де майно є одним із:

• m - для класів, які встановлюють маржу
• p - для занять, які встановлюють набивання

Де сторони є одним із:

• t - для класів, які встановлюють margin-top або padding-top
• b - для класів, які встановлюють марж-дно або нижню частину
• l - для класів, які встановлюють марж-ліворуч або padding-left
• r - для класів, які встановлюють правий край або праворуч
• x - для класів, які встановлюють і * -ліво і * -право
• y - для класів, які встановлюють і * -top і * -bottom
• blank - для класів, які встановлюють поле або підкладку з усіх 4 сторін елемента

Де розмір - один із:

• 0 - для класів, які виключають запас або прокладку, встановивши його на 0
• 1 - (за замовчуванням) для класів, які встановлюють поле або прокладку на $ spacer * .25
• 2 - (за замовчуванням) для класів, які встановлюють поле або прокладку на $ spacer * .5
• 3 - (за замовчуванням) для класів, які встановлюють поле або прокладку на $ spacer
• 4 - (за замовчуванням) для класів, які встановлюють поле або прокладку на $ spacer * 1.5
• 5 - (за замовчуванням) для класів, які встановлюють поле або накладку на $ spacer * 3
• auto - для класів, які встановлюють поле для автоматичного

Тож вам слід зробити що-небудь із цього:

<div class="row mt-1">
<div class="row mt-2">
          ...
<div class="row mt-5">

Прочитайте документи для отримання додаткових пояснень. Спробуйте живі приклади тут .

Іноді margin-top може спричинити проблеми з дизайном:

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Отже, я рекомендую створити "margin-bottom class" замість "margin-top класів" і застосувати їх до попереднього пункту.

Якщо ви використовуєте Bootstrap, імпортуючи менше файлів Bootstrap, спробуйте визначити найменші класи з пропорційними пробілами теми Bootstrap:

.margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}  
.margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} 
.margin-bottom-md {margin-bottom: @line-height-computed;}
.margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}  

Я додав ці класи до моєї таблиці стилів завантаження

.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

Приклад

<div class="container">
  <div class="row voffset2">
    <div class="col-lg-12">
      <p>
        Vertically offset text.
      </p>
    </div>
  </div>
</div>

Я використовую ці класи для зміни верхньої межі:

.margin-top-05 { margin-top: 0.5em; }
.margin-top-10 { margin-top: 1.0em; }
.margin-top-15 { margin-top: 1.5em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-25 { margin-top: 2.5em; }
.margin-top-30 { margin-top: 3.0em; }

Коли мені потрібен елемент, щоб мати 2em проміжки від елемента вище, я використовую його так:

<div class="row margin-top-20">Something here</div>

Якщо ви віддаєте перевагу пікселям, то змініть їх на px, щоб мати його по-своєму.

Ви можете використовувати наступний клас для завантажувальної програми 4:

mt-0 mt-1 mt-2 mt-3 mt-4 ...

Посилання: https://v4-alpha.getbootstrap.com/utilities/spacing/

Бутстрап 4 альфа, для поля верхньої частини: скорочені назви класів CSS mt-1, mt-2 (mt-lg-5, mt-sm-2) однаково для нижньої, правої, лівої, і у вас також є автоматичний клас ml- авто

    <div class="mt-lg-1" ...>

Одиниці складаються з 1до 5: у змінних.scss, що означає, що якщо ви встановите mt-1, він дає .25rem верхньої межі.

$spacers: (
  0: (
    x: 0,
    y: 0
  ),
  1: (
    x: ($spacer-x * .25),
    y: ($spacer-y * .25)
  ),
  2: (
    x: ($spacer-x * .5),
    y: ($spacer-y * .5)
  ),
  3: (
    x: $spacer-x,
    y: $spacer-y
  ),
  4: (
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  ),
  5: (
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  )
) !default;

читати детальніше тут

https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

Додайте до цього класу у файлі .css:

.row {
    margin-left: -20px;
    *zoom: 1;
    margin-top: 50px;
}

або складіть новий клас і додайте його до елемента

.rowSpecificFormName td {
    margin-top: 50px;
}

Якщо ви хочете змінити лише одну сторінку, додайте таке правило стилю:

 #myCustomDivID .row {
     margin-top:20px;
 }

У Bootstrap 4 alpha + ви можете використовувати це

class margin-bottom-5

Класи названі у форматі: {property}-{sides}-{size}

just take a new class beside every row and apply css of margin-top: 20px;
here is the code below
<style>
  .small-top
   {
     margin-top: 25px;  
   }
</style>    
<div class="row small-top">
   <div class="col-md-12">
   </div>
 </div>

Bootstrap3

CSS (лише жолоби, без поля):

.row.row-gutter {
  margin-bottom: -15px;
  overflow: hidden;
}
.row.row-gutter > *[class^="col"] {
  margin-bottom: 15px;
}

CSS (рівні поля навколо, 15 пікселів / 2):

.row.row-margins {
  padding-top: 7px; /* or margin-top: 7px; */
  padding-bottom: 7px; /* or margin-bottom: 7px; */
}
.row.row-margins > *[class^="col"] {
  margin-top: 8px;
  margin-bottom: 8px;
}

Використання:

<div class="row row-gutter">
    <div class="col col-sm-9">first</div>
    <div class="col col-sm-3">second</div>
    <div class="col col-sm-12">third</div>
</div>

(з SASS або менше 15px може бути змінною від завантажувальної програми)

<div class="row row-padding">

простий код

Ви можете додати цей код:

[class*="col-"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

Просто використовуйте цей bs3-upgradeпомічник для проміжків та текстового відрізка ...

https://github.com/studija/bs3-upgrade

Якщо ви використовуєте BootStrap 3.3.7, ви можете скористатись завантажувачем-спейсером бібліотеки з відкритим кодом через NPM

npm install bootstrap-spacer

або ви можете відвідати сторінку github:

https://github.com/chigozieorunta/bootstrap-spacer

Ось приклад того, як це працює для пробілів рядків за допомогою класу .row-spacer:

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

Якщо вам потрібні пробіли між стовпцями, ви також можете додати клас .row-col-spacer:

<div class="row row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

Ви також можете комбінувати різні класи .row-spacer & .row-col-spacer:

<div class="row row-spacer row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

Мій трюк. Не так чисто, але добре працює для мене

<p>&nbsp;</p>