html - Bootstrap 内容不会随数据扩展

Question

最后一个输入被内容隐藏了，我正在使用 twitter bootstrap。我确定我的类行和列在正确的位置？

它只是一个带有表单和输入的简单列。

有什么你能看到的东西可以说明为什么它不扩展吗？因为如果我使用我所在的行，col 应该用数据扩展

    <div class="row">
    <div class="col-lg-12">
<div class="col-lg-12">
    <div class="ibox">
        <div class="ibox-title">
            <h5><?php echo System::translate("Your Products"); ?></h5>
        </div>
        <div class="ibox-content">
            <form id="form" action="#" class="wizard-big">    
                <input type="hidden" name="add_product" value="1">
                <h1><?php echo System::translate('Product Information'); ?></h1>
                <fieldset>
                <div class="col-lg-12">
                <div class="row">
                            <div class="form-group">
                                <label><?php echo System::translate('Product Name'); ?></label>
                                <input id="title" name="title" type="text" class="form-control required error" aria-required="true">
                            </div>
                            <div class="form-group col-sm-3">
                                <label><?php echo System::translate('Product Condition'); ?></label>
                                <select name="condition" class="col-sm-6 form-control required error" aria-required="true">
                                    <option value="new"><?php echo System::translate("New"); ?></option>
                                    <option value="likenew"><?php echo System::translate("Like New"); ?></option>
                                    <option value="used"><?php echo System::translate("Used"); ?></option>
                                    <option value="spares"><?php echo System::translate("For parts or not working"); ?></option>
                                </select>
                            </div>

                            <div class="form-group col-sm-3">
                                <label><?php echo System::translate('Auction Type'); ?></label>
                                <select name="type" id="auctiontype" class="col-sm-6 form-control required error" aria-required="true">
                                    <option value="auction"><?php echo System::translate("Auction"); ?></option>
                                    <option value="buyitnow"><?php echo System::translate("Buy It now"); ?></option>    
                                </select> 
                            </div>

                            <div class="buyitnow">
                                <div class="form-group col-sm-3">
                                    <label><?php echo System::translate('Buy it now Price'); ?></label>
                                    <input required="" value="<?php echo System::escape(Request::post('price')); ?>" type="text" value="0" name="price" class="form-control required error" aria-required="true">
                                </div>
                            </div>

                            <div class="auctioninfo">
                                <div class="form-group col-sm-3">
                                    <label><?php echo System::translate('Starting Price'); ?></label>
                                    <input value="<?php echo System::escape(Request::post('startingprice')); ?>" name="startingprice" type="text" class="form-control required error" aria-required="true"> 
                                </div>
                            </div>

                            <div class="form-group col-sm-3">
                                <label><?php echo System::translate('Listing Duration'); ?></label>
                                <select name="type" name="auctionlength" id="auctionlength" class="form-control required error" aria-required="true">
                                    <option value="3"><?php echo System::translate("3 Days"); ?></option>
                                    <option value="7"><?php echo System::translate("7 Days"); ?></option>   
                                    <option value="14"><?php echo System::translate("14 Days"); ?></option>
                                    <option value="30"><?php echo System::translate("30 Days"); ?></option>
                                </select> 
                            </div>

                            <div class="form-group">
                                <label><?php echo System::translate('Product Short Description'); ?></label>
                                <input id="shortdescription" name="shortdescription" type="text" class="form-control required error" aria-required="true">
                            </div>

                            <div class="form-group">
                                <label><?php echo System::translate('Product Description'); ?></label>
                                <textarea id="description" class="form-control required error" aria-required="true"></textarea>
                            </div>

                        </div>
                    </div>

                </fieldset>

Answer 1

您必须严格地将具有 col-sm-* 类的元素作为具有 row 类的元素的子元素。参见类 buyitnow 示例

<div class="row">
  .
  .
  .
  <div class="buyitnow">
     <div class="form-group col-sm-3">

应该是这样的

<div class="row">
  .
  .
  .
  <div class="buyitnow col-sm-3">
     <div class="form-group">

依此类推，下一个代码是您代码的格式更好的版本，因此您可以更好地理解

    <div class="row">
    <div class="col-lg-12">
<div class="col-lg-12">
    <div class="ibox">
        <div class="ibox-title">
            <h5><?php echo System::translate("Your Products"); ?></h5>
        </div>
        <div class="ibox-content">
            <form id="form" action="#" class="wizard-big">    
                <input type="hidden" name="add_product" value="1">
                <h1><?php echo System::translate('Product Information'); ?></h1>
                <fieldset>
                <div class="col-lg-12">
                <div class="row">
                            <div class="form-group col-sm-12">
                                <label><?php echo System::translate('Product Name'); ?></label>
                                <input id="title" name="title" type="text" class="form-control required error" aria-required="true">
                            </div>
                            <div class="form-group col-sm-3">
                                <label><?php echo System::translate('Product Condition'); ?></label>
                                <select name="condition" class="col-sm-6 form-control required error" aria-required="true">
                                    <option value="new"><?php echo System::translate("New"); ?></option>
                                    <option value="likenew"><?php echo System::translate("Like New"); ?></option>
                                    <option value="used"><?php echo System::translate("Used"); ?></option>
                                    <option value="spares"><?php echo System::translate("For parts or not working"); ?></option>
                                </select>
                            </div>

                            <div class="form-group col-sm-3">
                                <label><?php echo System::translate('Auction Type'); ?></label>
                                <select name="type" id="auctiontype" class="col-sm-6 form-control required error" aria-required="true">
                                    <option value="auction"><?php echo System::translate("Auction"); ?></option>
                                    <option value="buyitnow"><?php echo System::translate("Buy It now"); ?></option>    
                                </select> 
                            </div>

                            <div class="buyitnow col-sm-3">
                                <div class="form-group">
                                    <label><?php echo System::translate('Buy it now Price'); ?></label>
                                    <input required="" value="<?php echo System::escape(Request::post('price')); ?>" type="text" value="0" name="price" class="form-control required error" aria-required="true">
                                </div>
                            </div>

                            <div class="auctioninfo col-sm-3">
                                <div class="form-group">
                                    <label><?php echo System::translate('Starting Price'); ?></label>
                                    <input value="<?php echo System::escape(Request::post('startingprice')); ?>" name="startingprice" type="text" class="form-control required error" aria-required="true"> 
                                </div>
                            </div>

                            <div class="form-group col-sm-3">
                                <label><?php echo System::translate('Listing Duration'); ?></label>
                                <select name="type" name="auctionlength" id="auctionlength" class="form-control required error" aria-required="true">
                                    <option value="3"><?php echo System::translate("3 Days"); ?></option>
                                    <option value="7"><?php echo System::translate("7 Days"); ?></option>   
                                    <option value="14"><?php echo System::translate("14 Days"); ?></option>
                                    <option value="30"><?php echo System::translate("30 Days"); ?></option>
                                </select> 
                            </div>

                            <div class="form-group col-sm-3">
                                <label><?php echo System::translate('Product Short Description'); ?></label>
                                <input id="shortdescription" name="shortdescription" type="text" class="form-control required error" aria-required="true">
                            </div>

                            <div class="form-group col-sm-3">
                                <label><?php echo System::translate('Product Description'); ?></label>
                                <textarea id="description" class="form-control required error" aria-required="true"></textarea>
                            </div>

                        </div>
                    </div>

                </fieldset>