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