响应宽度

Question

我是新手。 我有以下引导表格：

<form class="form-inline " style="display: inline-block">

   <div class="form-group" >
      <input type="text" class="form-control input-lg" id="inputEmail"  placeholder="full names..."
                                    style="margin: 25px">
   </div>



   <div class="form-group">
        <input type="email" class="form-control input-lg" id="inputEmail" placeholder="email address..."style="margin: 25px">
   </div>

   <button type="submit" class="btn btn-primary mx-auto">Sign Up</button>

</form>

我想使文本框变宽：当我自定义样式的宽度时，它对于小窗口将不再响应。宽度不会缩小以适合小屏幕。

您的建议如下：

<div class="container">
  <div class="row">
    <div class="col">

      <form class="form-inline " style="display: inline-block">



        <div class="form-group">
          <input type="text" class="form-control input-lg" id="inputEmail" placeholder="Enter full names..." style="margin: 25px;width:400px">
        </div>



        <div class="form-group">
          <input type="email" class="form-control input-lg" id="inputEmail" placeholder="Enter email address..." style="margin: 25px;width:400px">
        </div>

        <button type="submit" class="btn btn-primary mx-auto">Sign Up</button>

      </form>
    </div>
  </div>
</div>

Answer 1

GOOGLE_APPLICATION_CREDENTIALS=Google-3af068b12cb8.json node ./somescript.js

杂乱无章但可以胜任！

Answer 2

根据您提供的website，您正在使用固定 margin: 25px;和width: 300px;

破坏响应能力

我可以通过使用媒体查询来解决它：

@media (min-width: 430px) {
  input {
    margin: 25px;
    width: 300px;
  }
}

断点特定于您的情况！通常，我会推荐bootstrap breakpoints。