2016-06-25 6 views
0

私はより簡単なHTMLを作成するために、ブートストラップのフォームグループとフォーム・コントロールのクラスを使用しています。スクリーンショットを参照してください。フォームコントロールクラスのdisplayプロパティをインラインに設定しようとしましたが、html要素がインラインで表示されません。 PFB私のコードスニペット。どのようにHTMLフォーム入力要素(ブートストラップのクラス「フォームグループ」)をインラインで表示するには?

<div id="user_search" class="form-group" style="display:inline;"> 
     <label for="search_id" class="label_font">Search Title</label> 
    <input type="text" class="form-control" id="search_id" placeholder="Movie Title, TV Show title..." size="40"> 
    <label for="genre_id" >Genre</label> 
    <select id="genre_id"> 
     <option></option> 
     <option>Action</option> 
     <option>Adventure</option> 
     <option>Animation</option> 
     <option>Biography</option> 
     <option>Comedy</option> 
     <option>Crime</option> 
     <option>Documentary</option> 
     <option>Drama</option> 
     <option>Family</option> 
     <option>Fantasy</option> 
     <option>Film-Noir</option> 
     <option>Game-Show</option> 
     <option>History</option> 
     <option>Horror</option> 
     <option>Music</option> 
     <option>Musical</option> 
     <option>Mystery</option> 
     <option>News</option> 
     <option>Reality-TV</option> 
     <option>Romance</option> 
     <option>Sci-Fi</option> 
     <option>Sport</option> 
     <option>Talk-Show</option> 
     <option>Thriller</option> 
     <option>War</option> 
     <option>Western</option> 
    </select> 
    <label for="type_id" >Title Type</label> 
    <select id="type_id"> 
     <option></option> 
     <option>Movie</option> 
     <option>TV Show</option> 
    </select> 
    <label for="year_id" >Year</label> 
    <input type="number" width="10" min="1900" max="2025" step="1" value="2016" id="year_id"> 
    <button type="button" id="search_Title">Search Title</button> 

</div> 

CSSファイル

.form-control{ display:inline;}

私はまた、ディスプレイ試してみました!インライン重要。しかし、違いは見られませんでした。私は、すべてのフォームは、ブートストラップのフォームグループとフォーム・コントロールのクラスenter image description hereを使用して、単一の行に表示することにしたいです。

答えて

1

あなたは、単にBootstrap documentationあたりとして... form-inlineクラスを使用する必要があります。基本的には、 'form-inline'クラスを持つ別のクラスにdivをラップしてください。 display:inline;追加のCSSの必要はありません。

関連する問題