2017-01-22 8 views
-2

だから、私は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> 

私はこれを試してみたと思っていましたが、私の睡眠は脳に何か愚かなものがなければなりません。

ありがとうございます!

+1

:ここでは、それは次のようになります。このテキストを読む際に問題となるものが正確に何であるかを誰も理解できません。 – Dekel

+1

小さなjsFiddleを作成して問題を実証し、回答のベースを設定できますか? –

+1

これはブートストラップの一般的な問題です。独自のクラスを書くことに何も問題はありません。 .full-width {width:100%;}のようなものを追加して、それを使用してください –

答えて

0

はい、フォームコントロールクラスを使用するのが正解です。私がbootstrap.jsを使用して自分でフォーマットするのではなく、& cssというフォーマットを使用しているという意味で「正しい」と言います(これはbootstrap.jsを使用する目的を無効にします)。 **ライブ**作業例(jsfiddle/codepen /スニペット)を作成します

https://jsfiddle.net/2v9pqfrk/2/

<link rel="stylesheet" href="bootstrap.min.css"> 
<body> 

    <div class="navbar navbar-inverse navbar-static-top"> 
     <div class="container"> 
      <a href="#" class="navbar-brand">Items</a> 

      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

      <div class="collapse navbar-collapse navHeaderCollapse"> 

       <ul class="nav navbar-nav navbar-right"> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Items <b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Item 1</a></li> 
          <li><a href="#">Item 2</a></li> 
          <li><a href="#">Item 3</a></li> 
         </ul> 
        </li> 
        <li><a href="#newItem" data-toggle="modal">New Item</a></li> 
        <li><a href="#">Edit Item</a></li> 
        <li class="active"><a href="#">Import Items</a></li> 
       </ul>     
      </div> 

     </div> 
    </div> 

    <div class="container"> 
     <div class="jumbotron"> 
      <h3>My Items</h3> 

      <form> 
      <div class="form-group"> 
      <select id="ItemsSelect" size="10" multiple class="form-control"> 
       <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> 

    <div class="container"> 

     <div class="row"> 
      <div class="col-md-3">    
       <h3><a class="btn btn-info" href="#">Import Items</a></h3> 
       <p>Click here import Items with selected Item</p>    
      </div> 
      <div class="col-md-3">    
       <h3><a class="btn btn-info" href="#">Item Upload</a></h3> 
       <p>Click here to log in and upload items</p> 
      </div> 
     </div> 

    <div> 

    <div class="navbar navbar-default navbar-fixed-bottom > 
     <div class="container"> 
      <p class="navbar-text pull-left">Items</p> 

     </div> 
    <div> 

    <div class="modal fade" id="newItem" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"><h4>New Item</h4></div> 
       <div class="modal-body"><p>New Item</p></div> 
       <div class="modal-footer"> 
        <a href="#" class="btn btn-default pull-right" data-dismiss="modal">Close</a> 
        <a href="#" class="btn btn-primary pull-right" data-dismiss="modal">Close</a> 

       </div> 
      </div> 
     </div> 
    </div> 

    <script src="jquery.min.js"></script> 
    <script src="bootstrap.min.js"></script> 

<body> 
関連する問題