需要帮助以使此输入表单具有响应性答案

【问题标题】：Need help in making this input form responsive需要帮助以使此输入表单具有响应性
【发布时间】：2017-10-28 19:33:09
【问题描述】：

我想让这个表单具有响应性。我添加了 Bootstrap，但它似乎不起作用。我已经在网页上添加了这段代码，并在移动设备上进行了检查：表单元素搞砸了。

有人可以提供具体的帮助指针吗？

这是我的工作代码：

这是从我的 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">&nbsp;</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>

【问题讨论】：

表单是响应式的，但是是的，它在小屏幕上搞砸了，因为您没有为小屏幕添加合适的样式。如果您可以指出表单的特定元素以及您希望如何在移动设备中对齐它们，我们将更容易回答。
感谢您的回复@RajanBenipuri 我希望左侧的所有元素都保持这种状态，而右侧的元素能够响应屏幕尺寸并且可能落在左侧的“下方”，因为它是一个输入表单。当我开始为移动视图缩小浏览器时，左右元素会松动它们的位置。

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

我在您的 css 中为 .mc-left 和 .mc-right 添加了一个简单的 @media 规则，并且它与左对齐。

@media screen and (max-width: 700px){
.mc-left, .mc-right {
width: 100%;
display: block;
margin-left: 0px;
}
}

将此添加到您的 CSS 中。

希望对您有所帮助。

【讨论】：

如果有帮助就采纳为答案，让其他人也能从中受益