Бутстрап столбца не переходит к следующей строке на маленьком экране

Я пытаюсь создать поле формы с 4 кнопками в одной строке. Я использую Bootstrap, и так как я хотел, чтобы поле и кнопки были выровнены по вертикали, я сделал для него класс css vcenter.Бутстрап столбца не переходит к следующей строке на маленьком экране

JSfiddle с кодом

HTML

<form> 
       <div class="row stopWrap"> 
        <div class="form-group col-lg-8 col-md-8 col-sm-8 col-xs-12 vcenter"> 
         <label for="inputFirstName">First Name</label> 
         <input type="email" class="form-control" id="inputFirstName" placeholder="First Name"> 
        </div> 
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center vcenter"> 
         <button type="button" class="btn btn-warning" aria-label="Left Align"> 
          <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 
         </button> 

         <button type="button" class="btn btn-primary" aria-label="Left Align"> 
          <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 
         </button> 

         <button type="button" class="btn btn-danger" aria-label="Left Align"> 
          <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 
         </button> 

         <button type="button" class="btn btn-success" aria-label="Left Align"> 
          <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span> 
         </button> 
        </div> 
       </div> 
       </form>

CSS

.stopWrap{ 
white-space: nowrap; 
} 
.vcenter { 
display: inline-block; 
vertical-align: middle; 
float: none; 
}

источник

2016-02-06 anonn023432

Какое желаемое поведение уменьшает размер экрана? Вы хотите, чтобы поле «first name» стало меньше, а кнопки остались рядом с ним, или вы хотите, чтобы кнопки переходили к следующей строке или? – gibberish

@gibberish Я хочу, чтобы кнопки прыгали до следующей строки. Я использовал 'col-xs-12', но он не работает – anonn023432

это то, что вы ожидали: http://jsfiddle.net/v9ec3/857/ –

Проблема обусловлена float:none которая перекрывает самозагрузки float:left. Вот почему он не переходит к следующей строке.

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

<div> 
    &nbsp; 
</div>

http://jsfiddle.net/5sceeno8/

Это выглядит как взломать, но это не потому, что вы установили <input type="email" /> шириной до 100%, вы явно хотите, чтобы отобразить ярлык и ваш ввод на отдельных строках. Подобно этому:

<div> 
    <label for="inputFirstName">First Name</label> 
</div> 
<div> 
    <input type="email" class="form-control" id="inputFirstName" placeholder="First Name"> 
</div>

После использования   наша кнопка блок имеет сходную структуру к входу:

<div> 
    &nbsp; //this is the replacement for <label> above which has the same height. 
</div> 
<div> 
    //our buttons here 
</div>

источник

2016-02-06 03:35:04

Я пробовал это и работает, но я хотел бы знать, как это добавило '& nbsp' исправление проблемы? Спасибо – anonn023432

@Huskyworld: см. Мой обновленный ответ –

Почему бы не поставить кнопки в .row-fluid, и сделать каждую кнопку .span3?

источник

2016-02-06 03:58:13

Другой вариант заключается в использовании медиа-запрос для регулировки поплавка в бутстраповских перерывов на col-xs-12 точки останова (768px):

@media (max-width: 768px) { 
    #mybutt{float:left !important;text-align:left;} 
}

jsFiddle Demo

Это позволяет держать .vcenter класс, при желании, и делать другие необходимые вещи (например, text-align:left).

источник

2016-02-06 03:58:28 gibberish

Бутстрап столбца не переходит к следующей строке на маленьком экране

ответ

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