Bootstrap 3 столбца разумная укладка плюс плавающий правый элемент

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

Что мне нужно, чтобы все три выпадающих списка (и их ярлыки) могли складываться друг под друга разумным образом, когда область просмотра сужена.

Вот как я хочу, чтобы это выглядело:

enter image description here

Однако, как вы можете видеть на этой скрипке, он не работает таким образом на все: enter image description here

Либо они перекрываются из-за float:left, или выпадающий список, и ярлык разбивается и заканчивается на отдельных линиях.

http://jsfiddle.net/g8u45rmz/1/

Код очень прямолинеен:

<div class="col-xs-4"> 
    <span class='select-subfolder-label'>Subfolder:</span> 
     <select id='test2' class='folder-sel'> 
      <option>All</option> 
     </select> 
</div>

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

Как достичь этих двух целей? Помощь приветствуется.

источник

2015-05-08 Mike P.

Просто добавив класс form-control на select, вы получите желаемый результат.

Для сложного меню select на маленьком окне, добавление класса col-xs-12 в родительский div будет работать. Это заставит div использовать всю ширину, доступную для него на небольших устройствах. Также для маленьких и средних окон я использовал col-sm-4 и col-md-4, это изменит его так, что все divs появятся в строке.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class='row subnav'> 
 
    <div class="col-xs-12 col-sm-4 col-md-4"> \t <span class='select-folder-label'>Folder:</span> 
 

 
    <select class="form-control" id='test1' class='folder-sel'> 
 
     <option>All</option> 
 
    </select> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-4 col-md-4"> \t <span class='select-subfolder-label'>Subfolder:</span> 
 

 
    <select class="form-control" id='test2' class='folder-sel'> 
 
     <option>All</option> 
 
    </select> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-4 col-md-4"> \t <span class='select-other-label'>Other:</span> 
 

 
    <select class="form-control" id='test2' class='folder-sel'> 
 
     <option>All</option> 
 
    </select> 
 
    </div> 
 
    <div id="subnav_gear" class='dropdown nav navbar navbar-nav navbar-right'> <span class='glyphicon glyphicon-cog'></span> 
 

 
    </div> 
 
</div>

источник

2015-05-08 17:28:29

Это довольно чертовски близко. Я хотел, чтобы метки были в одной строке, когда на полном экране, и добавление формы-контроля дает вам элемент «display: block», поэтому он всегда обертывается. Тем не менее, это выглядит лучше всего при небольших разрешениях. –

Я внесла некоторые изменения, проверьте разные размеры окон :-) –

Мне очень понравилось. Спасибо! –

Класс «col-xs-4» в основном говорит: «Даже на дополнительных маленьких экранах это занимает 4 из 12 столбцов.

Попробуйте использовать col-md-4 или col-sm-4, когда экран входит в диапазон xs, он переключится на полную ширину и стек, как ожидалось.

источник

2015-05-08 17:21:36 Quintile

Bootstrap 3 столбца разумная укладка плюс плавающий правый элемент

ответ

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