Как использовать границу с Bootstrap

Ответ 1

К сожалению, что касается границ, они считаются частью пространства, которое занимает элемент. Позвольте мне ввести границу менее известного двоюродного брата: outline. Он практически идентичен границе. Единственное отличие состоит в том, что он ведет себя больше как box-shadow, поскольку он не занимает места в вашем макете и должен быть на всех четырех сторонах элемента.

http://codepen.io/cimmanon/pen/wyktr

.foo {
    outline: 1px solid orange;
}

Ответ 2

Как и в Bootstrap 3, вы можете использовать классы Panel:

<div class="panel panel-default">Surrounded by border</div>

Ответ 3

Здесь свойство CSS называется box-sizing. Оно определяет общую ширину элемента на вашей странице. Значение по умолчанию - content-box, которое не включает пробел, поле или границу элемента.

Следовательно, если вы установите для параметра div значение width: 500px и 20px все вокруг, оно займет 540px на вашем сайте (500 + 20 + 20).

Это то, что вызывает вашу проблему. Bootstrap вычисляет ширину набора для вещей, как и в предыдущем примере, и эти вещи не имеют границ. Поскольку Bootstrap подходит друг к другу, как головоломка, добавление границы к одной из сторон даст общую ширину 501px (продолжение вышеприведенного примера) и сломать макет.

Самый простой способ исправить это - настроить box-sizing. Значение, которое вы хотите использовать, - box-sizing: border-box. Это включает в себя прописку и границу в ваших элементах ящика. Здесь вы можете узнать больше о размерах полей.

Проблема с этим решением заключается в том, что он работает только на IE8+. Следовательно, если вам нужна более глубокая поддержка IE, вам необходимо переопределить ширину бутстрапа, чтобы учесть вашу границу.

Чтобы привести пример вычисления новой ширины, начните с проверки ширины, которую устанавливает Bootstrap на ваш элемент. Скажем, это a span6 и имеет ширину 320px (это чисто гипотетично, фактическая ширина вашего span6 будет зависеть от вашей конкретной конфигурации Bootstrap). Если вы хотите добавить одну границу с правой стороны с заполнением 20px там, вы должны написать этот CSS в своей таблице стилей

.span6 {
  padding-right: 20px;
  border-right: 1px solid #ddd;
  width: 299px;
 }

где новая ширина вычисляется по формуле:

old width - padding - border

Ответ 4

То, что другие упомянули о границе с рамкой, определенно верно. Вы все еще можете заставить это работать без необходимости создавать какие-либо пользовательские классы: http://jsfiddle.net/panchroma/yfzdD/

HTML

<div class="container">
<div class="row" >
    <div class="span12">
       <div class="row">
        <div class="span4"> 1 </div>
        <div class="span4"> 2 </div>
        <div class="span4"> 3 </div>
        </div><!-- end nested row -->
    </div><!-- end span 12 -->

</div> <!-- end row -->
</div><!-- end container -->

CSS

.span12{
border:solid 2px black;
background-color:grey;  
}  

Удачи!

Ответ 5

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

HTML

<div class="container">
    <div class="row" >
        <div class="span12">
            <div class="row">
                <div class="span4">
                    1
                </div>
                <div class="span4">
                    2
                </div>
                <div class="span4">
                    3
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.span12{
    -moz-box-shadow: 0 0 2px black;
    -webkit-box-shadow: 0 0 2px black;
    box-shadow: 0 0 2px black;
}

Fiddle

Ответ 6

В зависимости от того, какой размер вы хотите использовать div, вы можете использовать класс встроенного компонента thumbnail Bootstrap вместе с (или без) сеткой для создания границ вокруг каждого из ваших элементов div.

Эти примеры на сайте Bootstrap демонстрируют простоту использования и отсутствие необходимости в каких-либо специальных дополнительных CSS:

<div class="row">
    <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="..." alt="...">
        </a>
    </div>
    ...
</div>

, который создает следующие элементы сетки div:

или добавить дополнительный контент:

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p>
            <a href="#" class="btn btn-primary" role="button">Button</a>
            <a href="#" class="btn btn-default" role="button">Button</a>
       </p>
      </div>
    </div>
  </div>
</div>

, который создает следующие элементы сетки div:

Ответ 7

Вы не можете просто добавить границу к диапазону, потому что он сломает макет из-за того, как вычисляется ширина width: width = border + padding + width. Поскольку контейнер равен 940px, а диапазон составляет 940px, добавление границы 2px (так что 4px в целом) заставит его оторваться от центра. Работа вокруг заключается в изменении ширины, чтобы включить границу 4px (оригинал - 4px) или иметь другой div внутри, который создает границу 2px.