HTML分区在较小屏幕中没有响应

HTML分区在较小屏幕中没有响应,html,responsive-design,Html,Responsive Design,我目前正在为我的公司开发此表单,我在创建表单的响应站点时遇到问题。 我使用bootstrap框架来设计它 对于下面的代码部分,当我在移动电话中打开它时,这一行不会相互堆叠,而是会被挤压。我能知道怎么把它叠在一起吗 谢谢 HTML代码: <div class="container-fluid"> <form action="" class="row-fluid"> <fieldset class="row-fluid">

我目前正在为我的公司开发此表单,我在创建表单的响应站点时遇到问题。 我使用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>

你的项目
选择您想要的服务
搜索引擎优化
选择成本
$600
$800
$1000
习俗
服务期限
选择持续时间
1个月
2个月
3个月
4个月
5个月
6个月
电火花加工
选择成本
$450
$550
$650
量
挑选
1.
2.
3.
4.
5.
6.
扫描电镜
选择成本
$500
$600
$700
服务期限
挑选
1个月
2个月
三个月
4个月
5个月
6个月
SMM
选择成本
$500
$600
$700
服务期限
挑选
1个月
2个月
三个月
4个月
5个月
6个月
抱歉,如果它看起来很简单,这里的编码是新的


谢谢

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


然后去掉包含元素
容器流体的最小宽度
。如果它有一个固定的最小宽度,它就不是流动的。然后将您的
类替换为
行流体
类。

您也可以向我们展示您的CSS吗?我完全使用bootstrap Responsive CSS,没有其他CSS。CSS定义HTML标记的样式,即堆叠或压缩行为。因此,如果没有CSS,我预测很难改变这一点。希望我是错的或误解了你的问题:)@Steve实际上所有这些都是在引导CSS中完成的,你只是把类放在元素上:我放在标题部分的是:link href=“CSS/bootstrap responsible.CSS”rel=“stylesheet”>所有没有使用最小宽度的都OK解决了alr,只需要确保我没有为字段集和表单上课