Горизонтальное и вертикальное разделение кнопок Twitter Bootstrap

Что вызывает горизонтальное разделение кнопок Twitter Bootstrap?Горизонтальное и вертикальное разделение кнопок Twitter Bootstrap

enter image description here

Я не могу найти его в коде CSS.

Я пытаюсь повторить тот же для вертикального, но мне кажется, что я не в состоянии достичь этого:

enter image description here

Как добавить вертикальное разделение между кнопками, только если они» re stacked вертикально (второе изображение), но избегая того же (в этом случае ненужного), когда они не являются (первое изображение)?

EDIT: Код, используемый для генерации выше фотографий:

<div class="container-fluid"> 

    <div class="row-fluid"> 

     <div class="well well-small" id="menu-buttons"> 

      <div class="pull-left" style="width: 48%"> 

       <a class="btn btn-small">@ Style ^</a> 
       <a class="btn btn-small">@ Language ^</a> 

      </div> 

      <div class="pull-right text-right" style="width: 48%;"> 

       <a class="btn btn-small">@ Device</a> 
       <a class="btn btn-small">@ Webpage</a> 

      </div> 

      <div style="clear: both"></div> 

     </div> 

    </div> 

</div>

источник

2013-07-23 trejder

Было бы легче ответьте, что если вы указали свой код. Я предполагаю, что это как-то связано с поплавками, см. От веб-инспектора, имеют ли кнопки «@ Device» и «@ Webpage» определенное значение float. – quinnirill

оберните эти кнопки в 'div' с' inline-block'. Если это происходит из-за использования float 'clear: both' – Praveen

@quinnirill: Извините, для этого нет. Вот обновленный вопрос с кодом. – trejder

Что я хотел бы сделать что-то вроде этого:

.btn { 
    margin: 2px; 
} 
.well { 
    padding: 7px; 
}

Так что я addedd запас 2px вокруг каждой кнопки, и уменьшить заполнение контейнера (.well) на 2 пикселя. Таким образом, ваш стиль «полной ширины» остается неизменным, а «узкий» стиль теперь будет иметь 4-пиксельный интервал между кнопками.

Вы можете объявление дополнительного идентификатора или что-то перед тем селекторы, чтобы заставить его работать только на ваших «# меню кнопок»

И пример: http://jsfiddle.net/eHYnQ/

источник

2013-07-23 13:04:25 Pevara

Человек, похоже, ваше решение ROCKS! Позвольте мне сделать еще несколько проверок, но это выглядит многообещающе. – trejder

Я не понимаю, почему bootstrap не имеет какого-либо класса для подготовки верхнего поля –

Вы можете сделать это, добавив margin-bottom свойство для кнопок. В первой картине, это, вероятно, float: right; с margin-right: 5px;

источник

2013-07-23 12:08:49

Это первое, о чем я думал, и это не сработает. Добавление 'margin-bottom' навсегда (в обоих случаях) создало бы неприемлемое дополнительное пространство между кнопками и нижней границей лунки, которая их окружает, в первом случае (когда кнопки не складываются вертикально). – trejder

Вы можете попробовать здание на следующее:

#menu-buttons a:first-child { 
    margin-bottom: 3px; 
}

(Селектор является открыто конкретным, вы должны сделать что-то об этом)

источник

2013-07-23 12:22:08 quinnirill

Это не сработает - см. Мой комментарий к ответу Амина выше. Прекрасно работает, когда кнопки уложены вертикально, но выглядит уродливым (первая и вторая кнопки в каждой группе неправильно выровнены), когда они не сложены и находятся в одной строке. – trejder

После проверяя свой код, вы закрепили пару кнопок внутри div.

Так вместо того, чтобы % изменение значения для точек

<div class="pull-left" style="width: 115px; "> <a class="btn btn-small">@ Style ^</a> 
<a class="btn btn-small">@ Language ^</a> 

</div> 
<div class="pull-right text-right" style="width: 115px;"> <a class="btn btn-small">@ Device</a> 
<a class="btn btn-small">@ Webpage</a> 

</div>

Проверить это JSFiddle

Обновление: Как вы упомянули в комментарии о дизайне жидкости, здесь простой способ сделать это в HTML <br/>, чтобы получить разрывы строк.

<div class="pull-left" style="width: 38% "> <a class="btn btn-small">@ Style ^</a> 
    <br/> <a class="btn btn-small">@ Language ^</a> 

</div> 
<div class="pull-right text-right" style="width: 38%"> <a class="btn btn-small">@ Device</a> 
    <br/> <a class="btn btn-small">@ Webpage</a> 

</div>

Updated Fiddle

источник

2013-07-23 12:48:30 Praveen

Как вы можете видеть (классы 'container-fluid' и' row-fluid' в верхних div), это жидкая компоновка, поэтому предоставление абсолютных значений в пикселях вообще не является вариантом. Боковой комментарий: я открыл ваш jsFiddle и не вижу вертикального разделения в обеих группах кнопок. – trejder

@trejder вы уверены, что мой jsfiddle не работает? – Praveen

@trejder Проверьте мой обновленный ответ. – Praveen

Это row-fluid класс, который вызывает горизонтальную маржу.
Вы можете сделать row-fluid в row fluid, чтобы получить вертикальное расстояние.
См. bootstrap - fluidGridSystem при размещении жидкости.

Вы также должны использовать span классы, чтобы зафиксировать ширину

скрипку: here
экран:

Screen capture

Вот мой код:
Предупреждения Снимите <div class="span3" style="background-color:whitesmoke"> для полного экрана шириной сНа

<!Doctype html> 
<html> 
<head> 
    <link href="../css/bootstrap.css" type="text/css" rel="stylesheet" media="all"> 
</head> 
<body> 
     <div class="span3" style="background-color:whitesmoke"> 
      <div class="row-fluid"> 

       <div class="row-fluid"> 

        <div class="span6"> 
         <button>1</button> 
        </div> 
        <div class="span6"> 
         <button class="pull-right">2</button> 
        </div> 

       </div> 

       <div class="row-fluid"> 

        <div class="span6"> 
         <button>3</button> 
        </div> 
        <div class="span6"> 
         <button class="pull-right">4</button> 
        </div> 

       </div> 

      </div> 
     </div> 
</body> 
</html>

источник

2013-07-23 12:50:38 Done

Я помещаю ваш код в мой, с окружающим его и без него с 'container-fluid', и в обоих случаях я вижу некоторые странные результаты - каждая кнопка находится в отдельной строке. Может, я что-то упустил? Это совершенно не то, что я ищу. Результаты полностью отличаются от представленных на моих фотографиях. У вас есть какая-то скрипка, чтобы представить, что ваше решение действительно работает. – trejder

А, я вижу. Ваше душевное состояние прекрасно работает на широкоэкранных разрешениях. Но полностью не работает на мобильных устройствах. – trejder

http://jsfiddle.net/TJUcg/ – Done

Горизонтальное и вертикальное разделение кнопок Twitter Bootstrap

ответ

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