だから、私はbootstrap.jsジャンボトロンに複数の要素を選択しています。デフォルトでは、要素は自然に最大の文字列に収まるだけの大きさです。私はジャンボトロンの幅を横切ってそれを伸ばしてほしい。私はカスタムCSSでこれを行うことができますが、私は自分のCSをここに書くのではなく、ブートストラップの組み込み機能を使ってそれを行うべきだと感じています。要素をジャンボトロンに塗りつぶす「正しい」方法
私はブートストラップの初心者ですから、私が試みたことは、ジャンボトロンの中で動作しないような列の機能でした。効果を達成するために私自身の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>
私のセレクタは、それが「項目1」のテキストに合うようにする必要がありますとしてだけ同じ大きさが、私はそれが欲しいですジャンボトロン(左右のマージンスペースを差し引いたもの)をスパンする。
当然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ファイルに追加されます。しかし、私はそれを使って「正しい」ことをしているのだろうかと思っていました。
更新日:
ありがとうございました。私が必要なのは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>
私はこれを試してみたと思っていましたが、私の睡眠は脳に何か愚かなものがなければなりません。
ありがとうございます!
:ここでは、それは次のようになります。このテキストを読む際に問題となるものが正確に何であるかを誰も理解できません。 – Dekel
小さなjsFiddleを作成して問題を実証し、回答のベースを設定できますか? –
これはブートストラップの一般的な問題です。独自のクラスを書くことに何も問題はありません。 .full-width {width:100%;}のようなものを追加して、それを使用してください –