0

Col-xs と col-md に問題があります。

だから私が悪いことを続ける前に、私の使い方を説明してください。詳細を入力して家具の数量を入力できるユーザーフォームを作成しようとしています。家の中には別々のセクションがあるため、家具セクションはタブコンテンツ内にあります。

したがって、col-xs がラベル用の列と数量入力用の列の 2 つの列にまたがるのが好きです。その後、ゆっくりと 2 列ずつ増加するため、sm はラベル、数量、ラベルの数量などを表示します。

col-sm と col-lg は完全に機能しますが、col-xs と col-md は機能しません。まるでスキップされているかのようです。助けてください。

これは私のコードです...

	<div class="container">                   
                        
                            <h3>Houseold Inventory</h3>

                            <div class="tabbable">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#lounge" data-toggle="tab">Lounge</a></li>
                                    <li><a href="#dinning" data-toggle="tab">Dinning Room</a></li>
                                    <li><a href="#householdKitchen" data-toggle="tab">Kitchen</a></li>
                                    <li><a href="#bed" data-toggle="tab">Bed Room</a></li>
                                    <li><a href="#study" data-toggle="tab">Study</a></li>
                                    <li><a href="#householdGarden" data-toggle="tab">Garden</a></li>
                                    <li><a href="#domestic" data-toggle="tab">Domestic</a></li>
                                    <li><a href="#householdGarage" data-toggle="tab">Garage</a></li>
                                    <li><a href="#householdGym" data-toggle="tab">Gym Equipment</a></li>
                                    <li><a href="#householdMisc" data-toggle="tab">Miscellaneous</a></li>
                                    <li><a href="#householdBoxes" data-toggle="tab">Boxes</a></li>
                                    <li><a href="#householdExtra" data-toggle="tab">Extras</a></li>
                                </ul> <!-- nav-tabs END-->

                                <div class="tab-content">
                                    <div class="tab-pane active" id="lounge">
                                        <h4>Lounge</h4>

                                        <form role="form" class="form-inline">

                                            <div class="row">
                                                <div class="form-group">
													<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
													<div class="col-xs-6 col-sm-2 col-md-2">
														<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
													</div>
												<div>
												<div class="form-group">
													<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
													<div class="col-xs-6 col-sm-2 col-md-2">
														<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
													</div>
												<div>
												<div class="form-group">
													<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
													<div class="col-xs-6 col-sm-2 col-md-2">
														<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
													</div>
												<div>
												<div class="form-group">
													<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
													<div class="col-xs-6 col-sm-2 col-md-2">
														<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
													</div>
												<div>
												<div class="form-group">
													<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
													<div class="col-xs-6 col-sm-2 col-md-2">
														<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
													</div>
												<div>
												<div class="form-group">
													<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
													<div class="col-xs-6 col-sm-2 col-md-2">
														<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
													</div>
												<div>
												<div class="form-group">
													<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
													<div class="col-xs-6 col-sm-2 col-md-2">
														<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
													</div>
												<div>
												
                                            </div><!--end row-->
                                        </form>
                                    <div>
                                </div> <!--tab-content end-->
                            </div> <!--tabbable end-->
                        <!-- col-sm-6 END-->
                    
                </div>

私は Bootstrap と Web レイアウトに非常に慣れていませんが、批判は大歓迎です。

ps。コード挿入がこれを行っている理由を理解できないレイアウトの問題を許してください

pps。レイアウトの例については、このSimilerの質問を確認してください： 未回答の質問

pps。これが私のモバイル問題の画像です.... ここに画像の説明を入力

4

3 に答える 3

1

あなたの構造は少しずれています。次のようになります。

  <form role="form" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-6 col-sm-4 col-md-2 control-label">Corner Piece</label>
        <div class="col-xs-6 col-sm-2 col-md-2 col-lg-1">
            <input type="text" class="form-control" placeholder="QTY">
        </div>
    </div>
    <!-- end corner piece -->
    <div class="form-group">
        <label class="col-xs-6 col-sm-4 col-md-2 control-label">4/S Couch</label>
        <div class="col-xs-6 col-sm-2 col-md-2 col-lg-1">
            <input type="text" class="form-control" placeholder="QTY">
        </div>
    </div>
    <!-- end 4/S Couch -->
    <div class="form-group">
        <label class="col-xs-6 col-sm-4 col-md-2 control-label">My Label</label>
        <div class="col-xs-6 col-sm-2 col-md-2 col-lg-1">
            <input type="text" class="form-control" placeholder="QTY">
        </div>
    </div>
</form>

この機能例を見てください

HTH :)

于 2015-04-14T20:12:29.033 に答える