如何獲得具有邊框字段集的響應式網站

-1

這裏是頁的堆疊片段：

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css); 
 

 
.campiRicettaPersonale{ 
 
    margin-left: 7%; 
 
    margin-right: 7%; 
 
    padding-top: 10%; 
 
    height: 100%; 
 
} 
 
.bordFieldset{ 
 
    padding-top: 1px; 
 
    padding-left: 50px; 
 
    padding-right: 50px; 
 
    padding-bottom: 30px; 
 
    border: 1px white; 
 
    border-radius: 9px; 
 
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); 
 
}

<div class="campiRicettaPersonale"> 
 
      <div class="nomeRicetta current"> 
 
      <fieldset class="bordFieldset"> 
 
       <h2 class="well titolo">Non perdere tempo crea ora la tua ricetta!<br> Per iniziare specifica un nome</h2> 
 
       <div class="row"> 
 
       <div class="col-md-8"> 
 
        <div class="form-group" id="nomeRicettaIn"> 
 
        <input name="nomeRicetta" id="nomeRicetta" type="text" class="form-control" placeholder="Nome della tua ricetta"> 
 
        </div> 
 
        <span class="help-block" id="nomeRicettaError"></span> 
 
       </div><!--Fine div col--> 
 
       <div class="col-md-4"> 
 
        <select name="tipoPiatto" class="form-group form-control" id="tipoPiatto"> 
 
        <option selected value="Selezionare la tipologia del piatto" >Selezionare la tipologia del piatto</option> 
 
        </select> 
 
       </div><!--Fine div col--> 
 
       </div> 
 
       <input type="button" name="next" class="btn btn-success next btndx" value="Successivo" /> 
 
      </fieldset> 
 
      </div><!--Fine div nomeRicetta step 1--> 
 
      </div>

來源

2017-05-12 Paolo Porcellato

問題尋求幫助的代碼必須包括必要的最短的代碼重現它在**問題本身**最好在[** Stack Snippet **]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）中。請參閱[**如何創建最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve） –

使用媒體查詢來控制移動margin和padding ：

@media (max-width: 768px) { 
    .campiRicettaPersonale { 
    margin: 5px; 
    } 
    .bordFieldset { 
    padding: 5px; 
    margin: 5px; 
    } 
}

想了解更多關於這一點，看看這篇文章（5分鐘讀數）：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

.campiRicettaPersonale { 
 
    margin-left: 7%; 
 
    margin-right: 7%; 
 
    padding-top: 10%; 
 
    height: 100%; 
 
} 
 

 
.bordFieldset { 
 
    padding-top: 1px; 
 
    padding-left: 50px; 
 
    padding-right: 50px; 
 
    padding-bottom: 30px; 
 
    border: 1px white; 
 
    border-radius: 9px; 
 
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); 
 
} 
 

 
@media (max-width: 768px) { 
 
    .campiRicettaPersonale { 
 
    margin: 5px; 
 
    } 
 
    .bordFieldset { 
 
    padding: 5px; 
 
    margin: 5px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="campiRicettaPersonale"> 
 
    <div class="nomeRicetta current"> 
 
    <fieldset class="bordFieldset"> 
 
     <h2 class="well titolo">Non perdere tempo crea ora la tua ricetta!<br> Per iniziare specifica un nome</h2> 
 
     <div class="row"> 
 
     <div class="col-md-8"> 
 
      <div class="form-group" id="nomeRicettaIn"> 
 
      <input name="nomeRicetta" id="nomeRicetta" type="text" class="form-control" placeholder="Nome della tua ricetta"> 
 
      </div> 
 
      <span class="help-block" id="nomeRicettaError"></span> 
 
     </div> 
 
     <!--Fine div col--> 
 
     <div class="col-md-4"> 
 
      <select name="tipoPiatto" class="form-group form-control" id="tipoPiatto"> 
 
      <option selected value="Selezionare la tipologia del piatto">Selezionare la tipologia del piatto</option> 
 
      </select> 
 
     </div> 
 
     <!--Fine div col--> 
 
     </div> 
 
     <input type="button" name="next" class="btn btn-success next btndx" value="Successivo" /> 
 
    </fieldset> 
 
    </div> 
 
    <!--Fine div nomeRicetta step 1--> 
 
</div>

來源

2017-05-12 13:53:49

如何獲得具有邊框字段集的響應式網站

回答

相關問題