이 입력 양식을 응답으로 만들기위한 도움이 필요합니다.

이 양식을 응답 가능하게 만들고 싶습니다. 부트 스트랩을 추가했지만 작동하지 않는 것 같습니다. 웹 페이지에이 코드를 추가하고 모바일에서 동일한 코드를 확인했습니다. 양식 요소가 엉망입니다.이 입력 양식을 응답으로 만들기위한 도움이 필요합니다.

누군가가 특정 도움말 포인터를 제공해 줄 수 있습니까? 여기 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 왼쪽에있는 모든 요소와 화면 크기에 반응하는 오른쪽 요소를 그대로두고 왼쪽에있는 요소 아래에 떨어질 수 있습니다. 이는 입력 폼이기 때문입니다. 모바일보기를 위해 브라우저를 작게 만들기 시작하면 왼쪽 및 오른쪽 요소의 위치가 느슨합니다. –

@ 미디어 규칙을 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 –

도움이된다면 대답으로 받아 들여 다른 사람들도 유익을 얻을 수있게하십시오. –

이 입력 양식을 응답으로 만들기위한 도움이 필요합니다.

답변

관련 문제