需要幫助，使這種輸入形式響應

我想使這種形式響應。我添加了Bootstrap，但它似乎不起作用。我在網頁上添加了這些代碼，並在移動設備上進行了相同的檢查：表單元素混亂了。需要幫助，使這種輸入形式響應

有人可以提供特定的幫助指針嗎？

這是我工作的代碼：

這裏是相應的HTML和CSS從我CodePen複製：

.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>

來源

2017-10-28 Nadeem Uz Zaman

表單是響應式的，但是它在小屏幕上混亂了，因爲您沒有爲小屏幕尺寸添加適當的樣式。如果您可以指定表單的特定元素以及如何將其與移動設備對齊，則我們可以更輕鬆地回答。 –

感謝您的回覆@RajanBenipuri我希望左側的所有元素都保持這種狀態，右側的元素可以響應屏幕大小，並且可能會落在左側的「下方」，因爲它是一種輸入形式。當我開始縮小移動視圖的瀏覽器時，左側和右側的元素鬆動了他們的位置。 –

我添加了一個簡單的@媒體規則在您的CSS爲.mc-left和.mc-right並且它的對齊向左。

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

在你的css中加入這個。

希望得到這個幫助。

來源

2017-10-28 11:33:09

非常感謝，這工作！：D –

接受它作爲答案，如果它的幫助，使其他人也可以從中受益 –

需要幫助，使這種輸入形式響應

回答

相關問題