この入力フォームを応答可能にするための助けが必要です

このフォームを反応的にしたいと考えています。ブートストラップを追加しましたが、動作しないようです。私はこのコードをWebページに追加し、モバイルでも同じことを確認しました。フォームの要素が混乱しています。この入力フォームを応答可能にするための助けが必要です

誰かが特定のヘルプポインタを提供してもらえますか？ここで

は私の作業コードは次のとおりです。ここ

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">&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左にあるすべての要素と、画面サイズに反応する右の要素がそのまま残り、入力フォームのように左側の要素の下に落ちるようにします。モバイルビューでブラウザを小さくすると、左右の要素の位置がずれてしまいます。 –

私はシンプルを追加しました@ .mc-leftと.mc-rightのためのあなたのCSSの中のメディアルールとそれを左に揃える。

@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 –

他の人も恩恵を受けるように助けてくれたら、それを回答として受け入れてください –

この入力フォームを応答可能にするための助けが必要です

答えて

関連する問題