HTML分割在小屏幕上没有响应

Question

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

对于下面的代码部分，当我在手机上打开它时，这一行并不相互堆叠，而是被压缩。我能知道如何使它们堆叠在一起吗?

感谢

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>

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

谢谢

Answer 1

确保你使用的是自引导式响应式CSS，而不是标准的CSS。

然后去掉包含元素container-fluid的最小宽度。如果它的最小宽度是固定的，那么它在移动尺寸下就不是流动的。然后将row类替换为row-fluid类。