Добавить отступ между элементами строки bootstrap

У меня есть 3 разных элемента в моем классе строк с начальной загрузкой. Я хочу создать отступ (например, 20 пикселей) между КАЖДЫМ элементом в контейнере строки. Поскольку элементы разделены на 4 равных пространства контейнера строки (на одной строке), добавление класса поля с параметром поля 20 пикселей перемещает другие элементы на следующую строку (тогда как я хочу, чтобы они все находились в одной строке). ).

Мой текущий код

<div class="row">
      <a style="display:block" href="#">
        <div class="col-sm-4 margin">
          <span class="glyphicon glyphicon-envelope"></span>
          <h4>About Us</h4>
        </div>
      </a>
      <a style="display:block" href="#">
        <div class="col-sm-4 margin">
          <span class="glyphicon glyphicon-envelope"></span>
          <h4>Contacts</h4>
        </div>
      </a>
      <a style="display:block" href="#">
        <div class="col-sm-4 margin">
          <span class="glyphicon glyphicon-envelope"></span>
          <h4>Upcoming Events</h4>
        </div>
      </a>
    </div>

html css twitter-bootstrap
person Adam    schedule 02.04.2016    source источник
comment
Как насчет добавления padding к .col-sm-4 и установки .col-sm-4 в box-sizing: border-box;. См. этот пример: jsfiddle.net/pe0w20kd Вы этого хотите?   -  person Roy    schedule 02.04.2016
comment
Если бы у меня были отступы и размер окна для поля, я мог бы видеть, что контейнеры все еще находятся рядом (я добавил рамку вокруг элементов, как я вижу).   -  person Adam    schedule 02.04.2016

Ответы (2)


arrow_upward
1
arrow_downward

Я изменил структуру на более правильную, как мне кажется. И я использую padding для элемента h4.

Посмотреть эту скрипту

    <div class="row">          
        <div class="col-sm-4">
          <h4 class="margin">
            <a style="display:block" href="#">
              <span class="glyphicon glyphicon-envelope"></span>
                About Us
            </a>
          </h4>
        </div>

        <div class="col-sm-4">
          <h4 class="margin">
            <a style="display:block" href="#">
              <span class="glyphicon glyphicon-envelope"></span>
                About Us
            </a>
          </h4>
        </div>
        <div class="col-sm-4">
          <h4 class="margin">
            <a style="display:block" href="#">
              <span class="glyphicon glyphicon-envelope"></span>
                About Us
            </a>
          </h4>
        </div>
    </div>
person Vincent G    schedule 02.04.2016
comment
Спасибо за ответ. Это действительно то, чего я хочу. Я также немного изменил его, чтобы включить границу вокруг каждого блока элемента. - person Adam; 02.04.2016
comment
Пожалуйста. Я думаю лучше не перегружать классы бутстрапа добавлением в него фиксов и предпочтительнее менять в нем элементы :) - person Vincent G; 02.04.2016
comment
Я согласен. Лучше всего, чтобы код был красивым, чистым и простым! - person Adam; 02.04.2016

arrow_upward
1
arrow_downward

Создал скрипт, чтобы было понятно.
https://fiddle.jshell.net/q1je1kct/
Вы этого хотели?
Добавлено
display:inline-block;

Обновление
https://fiddle.jshell.net/q1je1kct/4/

Если вы не хотите, чтобы элементы переходили на новую строку, взгляните на этот
https://fiddle.jshell.net/q1je1kct/5/
Создано с использованием гибкой концепции.


новое обновление, как предложено
https://fiddle.jshell.net/q1je1kct/8/

person Sachin    schedule 02.04.2016
comment
Спасибо за Ваш ответ. Тем не менее, с вашим последним обновлением, даже я наводил курсор на элементы, я все равно видел, что они рядом (с точки зрения нажатия на ссылки). Я хотел бы иметь зазор между элементами, например, если я наведу курсор на пространство между ними, он не покажет мне ссылку на руку (т.е. то, как курсор меняется на руку, когда вы наводите курсор на ссылку). Таким образом, несмотря на то, что визуально есть зазор, элементы все равно не разнесены. - person Adam; 02.04.2016
comment
Я попробовал ваш код, и он работает так, как я хотел, всего с несколькими модификациями. Я принял другой ответ просто потому, что он кажется более чистым способом представления кода. Спасибо за помощь. - person Adam; 02.04.2016