0

我目前正在为我的公司开发此表单，我在创建表单的响应站点时遇到了问题。我使用引导框架来设计它。

对于下面的代码部分，当我在手机中打开它时，行并没有相互堆叠，而是被挤压了。我能知道如何让它相互堆叠吗？

谢谢

HTML 中的代码：

    <div class="container-fluid">
    <form action="" class="row-fluid">
    <fieldset class="row-fluid">
            <legend>Your Project</legend>
            <label>Choose the services you want</label>
                <div class="row">
                    <div class="span12">
                    <div class="span3" style="text-align:center;">
                            <label for="SEO" class="checkbox inline">
                                <input class="block-level-input" id="seo" name="seo" type="checkbox" onClick="optionCheck1()" value='TRUE' />SEO</label>

                            <select class="input-xlarge" id="seoCost" name="seoCost" style="visibility:hidden;margin-left:auto; margin-right:auto;" onChange='customBox1(this.value)'>
                                    <option value="0">Select Cost </option>
                                    <option value="600">$600</option>
                                    <option value="800">$800</option>
                                    <option value="1000">$1000</option>
                                    <option value="custom">Custom</option>
                            </select>

                            <input class="input-xlarge" id="customCost1" name="customCost1"  type="number" value="0" style="display:none;margin-left:auto; margin-right:auto;"/>


                            <div id="seodr" class="block-level-input" style="display:none;">
                                    <label>Duration of Service</label>
                                    <select class="input-xlarge" id="seoduration" name="seoduration" style="margin-left:auto; margin-right:auto;">
                                        <option value="0">Select Duration</option>
                                        <option value="1">1 month</option>
                                        <option value="2">2 month</option>
                                        <option value="3">3 month</option>
                                        <option value="4">4 month</option>
                                        <option value="5">5 month</option>
                                        <option value="6">6 month</option>
                                    </select>
                            </div>

                    </div>

                    <div class="span3">
                        <label for="edm" class="checkbox inline">
                            <input class="block-level-input" id="edm" name="edm" type="checkbox" onClick="edmCheck()" value='TRUE' />EDM</label>
                        <select class="input-xlarge" id="edmCost" name="edmCost" style="visibility:hidden; margin-left:auto; margin-right:auto;" >
                            <option value="0">Select Cost </option>
                            <option value="450">$450</option>
                            <option value="550">$550</option>
                            <option value="650">$650</option>
                        </select>

                        <div id="edmqty" class="row-fluid" style="display:none;">
                            <label>Quantity</label>
                            <select class="input-xlarge" id="edmquantity" name="edmquantity" style="margin-left:auto; margin-right:auto;" >
                                <option value="0">Select</option>
                                <option value="1">1 </option>
                                <option value="2">2 </option>
                                <option value="3">3 </option>
                                <option value="4">4 </option>
                                <option value="5">5 </option>
                                <option value="6">6 </option>
                            </select>
                        </div>

                    </div>  

                    <div class="span3">
                        <label for="sem" class="checkbox inline">   
                            <input class="block-level-input" id="sem" name="sem" type="checkbox" onClick="semCheck()" value='TRUE' />SEM</label>

                        <select class="input-xlarge" id="semCost" name="semCost" style="visibility:hidden; margin-left:auto; margin-right:auto;">
                            <option value="0">Select Cost </option>
                            <option value="500">$500</option>
                            <option value="600">$600</option>
                            <option value="700">$700</option>
                        </select>

                        <div id="semdr" class="row-fluid" style="display:none;">
                            <label>Duration of service</label>
                            <select class="input-xlarge" id="semduration" name="semduration" style="margin-left:auto; margin-right:auto;" >
                                <option value="0">Select</option>
                                <option value="1">1 month </option>
                                <option value="2">2 months</option>
                                <option value="3">3 months</option>
                                <option value="4">4 months</option>
                                <option value="5">5 months</option>
                                <option value="6">6 months</option>
                            </select>
                        </div>
                    </div>  

                    <div class="span3">
                        <label for="smm" class="checkbox inline">   
                            <input class="block-level-input" id="smm" name="smm" type="checkbox" onClick="smmCheck()" value='TRUE' />SMM</label>

                        <select class="input-xlarge" id="smmCost" name="smmCost" style="visibility:hidden; margin-left:auto; margin-right:auto;">
                            <option value="0">Select Cost </option>
                            <option value="500">$500</option>
                            <option value="600">$600</option>
                            <option value="700">$700</option>
                        </select>

                        <div id="smmdr" class="row-fluid" style="display:none;">
                            <label>Duration of service</label>
                            <select class="input-xlarge" id="smmduration" name="smmduration" style="margin-left:auto; margin-right:auto;" >
                                <option value="0">Select</option>
                                <option value="1">1 month </option>
                                <option value="2">2 months</option>
                                <option value="3">3 months</option>
                                <option value="4">4 months</option>
                                <option value="5">5 months</option>
                                <option value="6">6 months</option>
                            </select>
                        </div>
                    </div>  
                    </div>
                </div>

            </fieldset>
            </form>
</div>

对不起，如果它看起来很简单，这里是编码的新手。

谢谢

4

1 回答 1

0

确保您使用的是引导响应 CSS 而不是标准 CSS。

然后摆脱包含元素的 min-width container-fluid。如果它具有固定的最小宽度，则它在移动尺寸上不是流动的。然后用row类替换你的row-fluid类。

于 2013-06-18T07:41:36.187 回答