我想让这个表单响应。我添加了Bootstrap，但它似乎不起作用。我在网页上添加了这段代码并在手机上检查了相同的内容：表单元素搞砸了。
有人可以提供具体的帮助指示吗？
这是我的工作代码：
https://codepen.io/mohdahmed/pen/jaOOwb
这是从我的CodePen复制的相应HTML和CSS：
.mc-container {
width: 70%;
}
ul.mc-ul {
list-style-type: none;
padding: 0;
}
.mc-left {
float: left;
width: 20%;
}
.mc-right {
float: left;
margin-left: 5%;
width: 75%;
}
#mc-height-weight .input-group {
width: 1px;
padding-right: 10px;
}
#mc-height-weight input {
width: 120px;
}
#mc-age .input-group,
#mc-body-fat .input-group,
#mc-deficit-surplus .mc-d-s-right .input-group,
#mc-carbs .input-group,
#mc-protein .input-group {
width: 1px;
}
#mc-age input,
#mc-body-fat input,
#mc-deficit-surplus .mc-d-s-right input,
#mc-carbs input,
#mc-protein input {
width: 90px;
}
#mc-d-s-radio {
list-style-type: none;
padding: 0;
}
#mc-maint-cals,
#mc-bf-est {
font-weight: bold;
background-color: #ddd;
display: inline-block;
*display: inline; /* for IE7*/
*zoom: 1; /* for IE7*/
min-width: 30px;
padding: 0 4px 0 4px;
}<div class="mc-container">
<form id="mc-data" action="get" autocomplete="off" method="post" name="mc-data">
<ul class="mc-ul">
<li id="mc-unit-type">
<div class="mc-left">
Preferred Units
</div>
<div class="mc-right">
<label for="mc-u-met" class="radio-inline"><input type="radio" id="mc-u-met" name="units" value="metric">
Metric</label>
<label for="mc-u-imp" class="radio-inline">
<input type="radio" id="mc-u-imp" name="units" value="imperial" checked="checked">
Imperial</label>
</div>
</li>
<li id="mc-gender">
<div class="mc-left">
Gender
</div>
<div class="mc-right">
<label for="mc-is-male" class="radio-inline"><input type="radio" id="mc-is-male" name="gender" value="male">
Male</label>
<label for="mc-is-female" class="radio-inline">
<input type="radio" id="mc-is-female" name="gender" value="female">
Female</label>
</div>
</li>
<li id="mc-height-weight">
<div class="mc-left">
Height & Weight
</div>
<div class="mc-right">
<div id="mc-met-container" class="form-inline">
<div class="form-group form-group-lg">
<div class="input-group">
<input type="number" id="mc-h-cm" name="mc-h-w" placeholder="0" class="form-control">
<div class="input-group-addon">cm</div>
</div>
<div class="input-group">
<input type="number" id="mc-w-kgs" name="mc-h-w" placeholder="0" class="form-control">
<div class="input-group-addon">kgs</div>
</div>
</div>
</div>
<div id="mc-imp-container" class="form-inline">
<div class="form-group form-group-lg">
<div class='input-group'>
<input type="number" id="mc-h-ft" name="mc-h-w" placeholder="0" class="form-control">
<div class="input-group-addon">ft</div>
</div>
<div class="input-group">
<input type="number" id="mc-h-in" name="mc-h-w" placeholder="0" class="form-control">
<div class="input-group-addon">in</div>
</div>
<div class="input-group">
<input type="number" id="mc-w-lbs" name="mc-h-w" placeholder="0" class="form-control">
<div class="input-group-addon">lbs</div>
</div>
</div>
</div>
</div>
</li>
<li id="mc-age">
<div class="mc-left">Age</div>
<div class="mc-right">
<div class="form-group form-group-lg">
<div class="input-group">
<input type="number" id="mc-age" name="age" placeholder="0" class="form-control">
<div class="input-group-addon">years old</div>
</div>
</div>
</div>
</li>
<li id="mc-body-fat">
<div class="mc-left">
Body Fat Percentage
</div>
<div class="mc-right">
<div>
<p>Based on the information you have provided, we estimate your body fat to be around <span id="mc-bf-est">%</span>.</p>
<p>The above is only an estimate, for best results use a DEXA Machine or skin-fold calipers to determine your body fat percentage.</p>
</div>
<div class="form-group form-group-lg">
<div class="input-group">
<input type="number" id="mc-fat" name="fat" placeholder="0" class="form-control">
<div class="input-group-addon">% body fat</div>
</div>
</div>
</div>
</li>
<li id="mc-activity">
<div class="mc-left">
Acivity Level
</div>
<div class="mc-right">
<ul class="mc-ul">
<li><label for="mc-al-sed"><input type="radio" id="mc-al-sed" name="activity-level" value="sedentary" checked="checked">Sedentary</label></li>
<li><label for="mc-al-lt"><input type="radio" id="mc-al-lt" name="activity-level" value="lt-act">Lightly Active</label></li>
<li><label for="mc-al-md"><input type="radio" id="mc-al-md" name="activity-level" value="mod-act">Moderately Active</label></li>
<li><label for="mc-al-va"><input type="radio" id="mc-al-va" name="activity-level" value="very-act">Very Active</label></li>
</ul>
</div>
</li>
<li id="mc-deficit-surplus">
<div class="mc-left">
Caloric Deficit/Surplus
</div>
<div class="mc-right">
<div>
<p>According to the information you provided, you burn about <span id="mc-maint-cals"> </span> calories daily.</p>
<p>In order to lose weight, you will need to be below that figure (deficit). In order to gain weight or muscle, you will need to be above that figure (surplus). If you're happy where you're at, select maintain.</p>
</div>
<div class="mc-left">
<ul id="mc-d-s-radio">
<li><label for="mc-deficit"><input type="radio" id="mc-deficit" name="mc-d-s" value="deficit">Deficit</label></li>
<li><label for="mc-maint"><input type="radio" id="mc-maint" name="mc-d-s" value="maintenance">Maintenance</label></li>
<li><label for="mc-surplus"><input type="radio" id="mc-surplus" name="mc-d-s" value="surplus">Surplus</label></li>
</ul>
</div>
<div class="mc-right mc-d-s-right">
<div class="form-group form-group-lg">
<div class="input-group">
<input type="number" name="mc-d-s" placeholder="0" class="form-control">
<div class="input-group-addon">%</div>
</div>
</div>
</div>
</div>
</li>
<li id="mc-carbs">
<div class="mc-left">
Total Carbs
</div>
<div class="mc-right">
<p>On a Ketogenic diet, the optimal range of carbohydrate intake is 5% or less of your total intake, which usually equates to 20g of Net Carbs. Adjust to your liking, but going above 20g of carbs will depreciate your results.</p>
<div class="form-group form-group-lg">
<div class="input-group">
<div class="input-group-addon">Carbs</div>
<input type="number" id="mc-carbs-input" name="carbs" placeholder="0" class="form-control" value="20">
<div class="input-group-addon">g</div>
</div>
</div>
</div>
</li>
<li id="mc-protein">
<div class="mc-left">
Total Protein
</div>
<div class="mc-right">
<p>Protein consumption should be limited as consuming too much can lead to slower weight loss and even kicking you out of ketosis.</p>
<div class="form-group form-group-lg">
<div class="input-group">
<div class="input-group-addon">Protein</div>
<input type="number" id="mc-carbs-input" name="carbs" placeholder="0" class="form-control" value="0.6">
<div class="input-group-addon">g / lb Lean Body Mass</div>
</div>
</div>
</div>
</li>
<li id="mc-macros-output">
<div class="mc-left">
Your Daily Macronutrients
</div>
<div class="mc-right">
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%">
<span id="mc-macros-cals"></span> calories
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-success active" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%">
<span id="mc-macros-fat"></span> g fats
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-info active" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:50%">
<span id="mc-macros-protein"></span> g protein
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-warning active" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:10%">
<span id="mc-macros-protein">20</span> g carbs
</div>
<span id="mc-macros-protein">20</span> g carbs
</div>
</div>
</li>
</ul>
</form>
</div>
答案 0 :(得分：0)
我在你的css中为.mc-left和.mc-right添加了一个简单的@media规则，并且它在左边对齐。
@media screen and (max-width: 700px){
.mc-left, .mc-right {
width: 100%;
display: block;
margin-left: 0px;
}
}
在你的CSS中添加它。
希望得到这个帮助。