2013-09-11 3 views
0

enter image description here Я сделал 2 кнопки на одной линии. Вторая - это складная кнопка, которая добавляет еще две кнопки к представлению. Все это прекрасно работает.Выравнивание складных кнопок в Twitter bootstrap

Однако вновь свернутый ряд кнопок выровнен со второй кнопкой. Я бы хотел, чтобы он снова привязывал его к новой рушившейся строке. Как это возможно?

<div class="span5 offset4"> 
    <button class="btn-primary btn-large btn-bank" type="button" 
     style="width: 100%;">Big Button </button> 
</div> 

<div id="collapsabilebutton"> 
    <a href="#show" data-toggle="collapse"><button 
    class="btn btn-large"> 
    Button just next to Big button . Click it to expand a new row of buttons . 
    </button></a> 
</div> 

<div id="show" class="collapse"> 
    <button class="btn btn-small">hi</button> 
    <button class="btn btn-small">hi</button> 
</div> 

Моя потребность: я не хочу, чтобы новый ряд оставался сложенным с помощью маленькой кнопки над ним. На самом деле я хочу, чтобы он был привязан к Большой кнопке.

Любые идеи?

EDIT 1: Bootstrap версия 2,3

EDIT 2: Добавлено изображение, поскольку его трудно воссоздать скрипку точно.

Я хочу поместить кнопку Hi не точно под кнопку Click Me, но присвоить ей номер Big Button.

**EDIT 3 (Answer)** 

Решение было довольно простым. Складные кнопки должны быть помещены в теги div родителя, для которых необходимо выполнить выравнивание! Таким образом изменил код на следующее, и она работает:

<div class="row"> 
    <div class="span5 offset4"> 
     <button class="btn-primary btn-large btn-primary" type="button" 
      style="width: 100%;">Large Button</button> 
      <div id="show" class="collapse"> 
       <button class="btn btn-small">hi</button> 
       <button class="btn btn-small">hi</button> 
      </div> 
    </div> 
    <div id="collapsabilebutton"> 
     <a href="#show" data-toggle="collapse"><button 
      class="btn btn-large">Click</button></a> 
    </div> 
</div> 
+2

Я думаю, было бы лучше, если бы вы могли показать в скрипке, как он выглядит в данный момент и чего именно вы хотите достичь в визуальных эффектах. :) – JofryHS

+0

Я попытался сделать скрипку из нее. http://jsfiddle.net/cDyHz/2/ Но, кроме использования Bootstrap js, мне также нужно использовать Bootstrap.dropdown.js. Я не могу найти способ связать свою скрипку. Поэтому я не могу показать это правильно :( – rockstar

+0

В принципе, я хочу, чтобы 'Big Button' &' Click Me' на той же строке. При нажатии на кнопку «Click me» кнопка рушится, чтобы показать кнопку «Привет». Однако «HI» кнопка должна быть не сразу под кнопкой «Click Me», но я хочу, чтобы ее можно было разместить в любом месте строки, содержащей кнопку. Я пробовал использовать диапазон, смещение, но с помощью этого кнопка 'Hi' перестала быть разборной, но была видна все время :( – rockstar

ответ

2

Хорошо, я пытаюсь не повлиять на ваш текущий код слишком много, поэтому я просто добавил одну модификацию CSS:

div#show { 
    width: 100%; 
} 

jsfiddle: http://jsfiddle.net/cDyHz/4/

+0

Спасибо, это действительно хорошее предложение. Особенно если родительский div находится в го e слева на линии. Я черпал вдохновение из этого и исправил свою проблему. В принципе мне нужно разместить мой разборчивый div внутри родительского div :-) thats it. спасибо за ваши предложения. – rockstar

+0

Не беспокойтесь. Рад, что это помогло – JofryHS

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