Как добавить поле между столбцами начальной загрузки без переноса

102

Теперь мой макет выглядит как

Изображение 127

В центральном столбце я хочу добавить небольшой запас между каждым Server Div. Но, если я добавлю маржу к CSS, она завершает перенос строк и выглядит так:

Изображение 128

<div class="row info-panel">
    <div class="col-md-4 server-action-menu" id="server_1">
        <div>
            Server 1
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_2">
        <div>
            Server 2
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_3">
        <div>
            Server 3
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_4">
        <div>
            Server 4
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_5">
        <div>
            Server 5
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_6">
        <div>
            Server 6
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_7">
        <div>
            Server 7
        </div>
    </div>
</div>

И CSS

.server-action-menu {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
    background-repeat: repeat;
    border-radius:10px;
}

.info-panel {
    padding: 4px;
}

Я попытался добавить поля, сделав это

.info-panel  > div {
    margin: 4px;    
}

Как я могу добавить маржу к DIVs, чтобы они не оставляли столько места с правой стороны?

Теги:
twitter-bootstrap-3

5 ответов

135
Лучший ответ

Вы должны работать с дополнением на внутреннем контейнере, а не с запасом. Попробуйте это!

HTML

<div class="row info-panel">
    <div class="col-md-4" id="server_1">
       <div class="server-action-menu">
           Server 1
       </div>
   </div>
</div>

CSS

.server-action-menu {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
    background-repeat: repeat;
    border-radius:10px;
    padding: 5px;
}
Поделиться
48

Если вам не нужно добавлять границу по столбцам, вы также можете просто добавить к ним прозрачную рамку:

[class*="col-"] {
    background-clip: padding-box;
    border: 10px solid transparent;
}
Поделиться
  • 5
    Хороший трюк, и если вы не можете использовать background-clip: padding-box (это CSS3), установите границы с тем же цветом фона вашей страницы;)
33

Я столкнулся с той же проблемой; и для меня это работало хорошо. Надеюсь, это поможет кому-то приземлиться здесь:

<div class="row">
    <div class="col-md-6">
        <div class="col-md-12">
            Set room heater temperature
        </div>
    </div>
    <div class="col-md-6">
        <div class="col-md-12">
            Set room heater temperature
        </div>
    </div>
</div>

Это автоматически отобразит пробел между двумя div. Изображение 2391

Поделиться
  • 2
    Это прекрасно работает, особенно когда цвет фона имеет значение. Также упоминается в этом ответе .
  • 1
    Но колонка прямо внутри колонки - плохая практика, верно?
21

Измените число @grid-columns. Затем используйте -offset. Изменение количества столбцов позволит вам контролировать объем пространства между столбцами. Например.

variables.less(приблизительная строка 294).

@grid-columns:              20;

someName.html

<div class="row">
  <div class="col-md-4 col-md-offset-1">First column</div>
  <div class="col-md-13 col-md-offset-1">Second column</div>
</div>
Поделиться
  • 3
    @ShaunLuttin вместо того, чтобы добавлять классы смещения ко всем вашим элементам div всех ваших шаблонов, чтобы сделать маржу, разве нет более глобального решения? Возникла та же проблема на stackoverflow.com/questions/26016396/…, но добавление классов смещения везде практически невозможно обслуживать.
  • 0
    @GeorgeKatsanos Вы можете использовать .make-md-column-offset() чтобы сделать это. Также попробуйте поиграть с переменной @grid-gutter-width .
3

Простой способ сделать это - сделать div в div

<div class="col-sm-4" style="padding: 5px;border:2px solid red;">
   <div class="server-action-menu" id="server_1">Server 1
   </div>
 </div>
<div class="col-sm-4" style="padding: 5px;border:2px solid red;">
   <div class="server-action-menu" id="server_1">Server 2
   </div>
 </div>
<div class="col-sm-4" style="padding: 5px;border:2px solid red;">
   <div class="server-action-menu" id="server_1">Server 3
   </div>
 </div>
Поделиться
  • 1
    Мистер Флорес Встроенный стиль редко является жизнеспособным решением для такого рода проблем.
  • 2
    @Kiwad Встроенные стили предназначены только для того, чтобы наглядно проиллюстрировать эффекты для зрителей.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню