如何获得具有边框字段集的响应式网站

Question

您好，我的手机网站上有问题。 桌面视图没问题

这是该页面的堆栈代码：

＆＃13;

＆＃13;

@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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用媒体查询来控制移动设备中的边距和填充：

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