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

У меня есть веб-макет на основе бутстрапа 3. Here - это JSFiddle. Чтобы позволить макету быть отзывчивым, мне пришлось принять слегка неудобную структуру (эта функциональность не включена, но код должен быть структурирован таким образом). Конечный результат на всех экранах с маленьким размером - это три информационных поля, каждая из которых занимает по 4 столбца, в контейнере шириной 80%. Мне пришлось структурировать такие блоки, чтобы обеспечить некоторые функциональные возможности. Во всяком случае, Как увеличить пробел между пробелами между ящиками?Добавить расстояние между столбцами начальной загрузки

<div class="container PageViews"> 
    <div class="row Page2 text-center"> 
    <div class="col-sm-4 padded"> 
     <div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span> </div> 
    </div> 
    <div class="col-sm-4"> 
     <div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok glyphicon-bordered"></span> </div> 
    </div> 
    <div class="col-sm-4"> 
     <div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone glyphicon-bordered"></span> </div> 
    </div> 
    <div class="col-sm-4"> 
     <div class="box"> 
     <div class="row"> 
      <div class="col-xs-6 col-sm-12"> 
      <h3>Title 1</h3> 
      </div> 
      <div class="col-xs-6 col-sm-12 eqheight1"> 
      <p class>Text 1 </p> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="col-sm-4"> 
     <div class="box"> 
     <div class="row"> 
      <div class="col-xs-6 col-sm-12"> 
      <h3>Title 2</h3> 
      </div> 
      <div class="col-xs-6 col-sm-12 eqheight2"> 
      <p>Text 2</p> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="col-sm-4"> 
     <div class="box"> 
     <div class="row"> 
      <div class="col-xs-6 col-sm-12"> 
      <h3>Title 3</h3> 
      </div> 
      <div class="col-xs-6 col-sm-12 eqheight3"> 
      <p>Text 3</p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

CSS:

.Page2 > *:nth-child(-n+3) { 
    border-bottom: 0; 
    padding-top: 10px; 
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px; 
} 

.Page2 > *:nth-last-child(-n+3) { 
    border-top: 0; 
    border-bottom-left-radius: 20px; 
    border-bottom-right-radius: 20px; 
    padding-bottom: 2em; 
} 

.Page2 > * { 
    border: 5px solid white; 
    background: #3DBEAF; 
}

источник

2016-01-18 George Edwards

Вы должны опубликовать код, который отражает вашу общую структуру [mcve], так как у вас довольно запутанный, что, в свою очередь, помогает вам гораздо труднее с учетом отсутствия полезной информации. – vanburen

@vanburen, как это могло быть меньше и все еще сообщать о проблеме? –

Я не знаю, что вы подразумеваете под «меньше», я не предлагал вам опубликовать код «меньше». Я имею в виду код, который вы опубликовали, должен продемонстрировать, как он работает в настоящее время, потому что решение вопроса ** МОЖЕТ ** не быть прямым, потому что предоставленного кода недостаточно, чтобы действительно увидеть, как вы это настроили. Это должно быть таким же простым, как добавление некоторого запаса, но не похоже. ** Минимальный ** да, но также ** полный **. – vanburen

Bootstrap использует подвесную систему, где каждая строка состоит из 12 колонн. Если вам нужно больше заполнить между полями, вам нужно будет использовать меньше столбцов. Вы должны изменить col-sm-4 на col-sm-3.

Вы хотите увеличить margin между ящиками, а не прокладкой.

Я отредактировал jsfiddle, и эта линия увеличила пробел между коробками

.Page2 > *:nth-child(-n+3) { 
 
    border-bottom: 0; 
 
    padding-top: 10px; 
 
    border-top-left-radius: 20px; 
 
    border-top-right-radius: 20px; 
 
} 
 

 
.Page2 > *:nth-last-child(-n+3) { 
 
    border-top: 0; 
 
    border-bottom-left-radius: 20px; 
 
    border-bottom-right-radius: 20px; 
 
    padding-bottom: 2em; 
 
} 
 

 
.Page2 > * { 
 
    border: 5px solid white; 
 
    background: #3DBEAF; 
 
} 
 

 
.col-sm-3 { 
 
margin-right: 8%; 
 
}

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container PageViews"> 
 
    <div class="row Page2 text-center"> 
 
    <div class="col-sm-3 padded"> 
 
     <div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span> </div> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
     <div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok glyphicon-bordered"></span> </div> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
     <div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone glyphicon-bordered"></span> </div> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
     <div class="box"> 
 
     <div class="row"> 
 
      <div class="col-xs-6 col-sm-12"> 
 
      <h3>Title 1</h3> 
 
      </div> 
 
      <div class="col-xs-6 col-sm-12 eqheight1"> 
 
      <p class>Text 1 </p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
     <div class="box"> 
 
     <div class="row"> 
 
      <div class="col-xs-6 col-sm-12"> 
 
      <h3>Title 2</h3> 
 
      </div> 
 
      <div class="col-xs-6 col-sm-12 eqheight2"> 
 
      <p>Text 2</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
     <div class="box"> 
 
     <div class="row"> 
 
      <div class="col-xs-6 col-sm-12"> 
 
      <h3>Title 3</h3> 
 
      </div> 
 
      <div class="col-xs-6 col-sm-12 eqheight3"> 
 
      <p>Text 3</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Кликните на полной странице, чтобы увидеть результаты.

источник

2016-01-18 18:45:13

Спасибо! Я предложил изменить, чтобы сделать ящики центральными. –

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

ответ

Смежные вопросы