Итак, у меня есть bootstrap.js Jumbotron с элементом Multi-Select в нем. По умолчанию элемент достаточно велик, чтобы соответствовать самой большой строке (естественно). Я бы хотел, чтобы он растянулся по ширине Jumbotron. Я могу сделать это с помощью пользовательского CSS, но мне кажется, что я должен использовать встроенные функции бутстрапа, чтобы сделать это, а не писать свою собственную CS здесь.«Правильный» способ сделать элемент заполнением jumbotron
Я новичок в бутстрепе, поэтому все, что я знал, чтобы попробовать, было функциями столбца, которые, похоже, не работают внутри Jumbotron. Я что-то делаю неправильно/глупо/бессмысленно, написав свой собственный CSS для достижения эффекта? то есть есть лучший способ? Благодаря!
UPDATE:
Конечно, жаль, Shoulda был jsfiddle готов. Попробуйте это:
https://jsfiddle.net/eve6q969/
Соответствующая часть:
<div class="container">
<div class="jumbotron">
<h3>My Items</h3>
<form>
<div class="form-group">
<select id="ItemsSelect" size="10" multiple>
<option >Item # 1</option>
<option >Item # 2</option>
<option >Item # 3</option>
<select>
</div>
</form>
<a href="#newItem" class = "btn btn-default" data-toggle="modal">New Item</a>
<a href="#" class = "btn btn-info">Edit Item</a>
<a href="#" class = "btn btn-danger">Delete Item</a>
</div>
</div>
Мой Selector только как большой, как это должно быть, чтобы соответствовать «Пункт 1» текст, но я бы хотел, для охвата Jumbotron (минус левое/правое поле пробела).
Естественно предложение Serg работает как шарм :)
<select class="full-width" id="mapsSelect" size="10" multiple>
<option >Map # 1</option>
<option >Map # 2</option>
<option >Map # 3</option>
<select>
с линией
.full-width{width: 100%;}
добавил в мой файл CSS. Но мне было интересно, если я делаю «правильную» вещь, используя ее.
UPDATE:
Благодаря Teison, вы правы. Все, что мне было нужно, это класс form-control. Как так:
<form>
<div class="form-group">
<select class="form-control" id="mapsSelect" size="10" multiple>
<option >Map # 1</option>
<option >Map # 2</option>
<option >Map # 3</option>
<select>
</div>
</form>
я думал, что я попробовал это, но мой сон запутанный мозг должен иметь какое-то глупое.
Спасибо!
Создать ** ** живой рабочий пример (jsfiddle/codepen/фрагмент кода). Никто не может понять, что именно представляет собой проблема, читающая этот текст. – Dekel
Можете ли вы создать небольшой jsFiddle, чтобы продемонстрировать проблему и создать базу для ответа? –
Это популярная проблема для бутстрапа, нет ничего плохого в написании собственного класса. Просто добавьте что-то вроде .full-width {width: 100%;} и используйте это –