Question

我在尝试使此表单响应时遇到问题。每当我将屏幕缩小时，我的表单都不会调整大小。我正在使用bootstrap，但我不确定如何实现这一点。我也不知道如何将“email”标签与其他标签对齐。

<html>
 <head>
  <title>Title</title>
 </head>
    <style>

    #myform {
        border: 1px outset #ccc;
        background: #fff repeat-x;
        padding: 50px;
        margin: 20px auto;
        width: 500px;
        height: 450px;
        font-size: 14px;
        -moz-border-radius: 4px;
    }

    #myform h3 {
        text-align: left;
        margin: 0 0 10px 0;
    }


    #inputs label,
    #inputs input,
    #inputs textarea,
    #inputs select {
        display: block;
        width: 300px;
        float: left;
        margin-bottom: 10px;
    }

    #inputs input {
        height: 40px;
    }

    #inputs label {
        text-align: right;
        width: 75px;
        padding-right: 20px;
    }

    #inputs br {
        clear: left;
    }

    #agree {
        font-size: 10.5px;
    }

   </style>

<body>

<div class="container">

    <form id="myform" action="#">

        <h3>Your Information</h3>

        <div id="inputs">

            <!-- username -->
            <label for="username">Firstname</label>
            <br/>
            <input id="username" type="text" placeholder="Fullname" /><br />

            <!-- password -->
            <label for="password">Password</label>
            <br/>
            <input id="password" type="password" placeholder="Password" />
            <br />

            <!-- email -->
            <label for="email">Email </label>
            <br/>
            <input id="email" type="text" placeholder="Email" />

        </div>
        <p>
            <button type="button" class="btn btn-primary btn-lg btn-block">
                Proceed
            </button>

        </p>
        <label id="agree">
            By registering you agree to Elephant's <a href="#">Terms of Service</a> and <a href="#">Privacy Policy.</a>
            <input type="checkbox" id="check" title="Required to proceed" />
        </label>

    </form>
</div>
<body>
</html>

Answer 1

正如您已经使用bootstrap一样，可以利用bootstrap css类。这是关于表单的官方文档（https://v4-alpha.getbootstrap.com/components/forms/）。其中一种形式解决方案是：

<form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend>Form Name</legend>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="username">username:</label>  
  <div class="col-md-4">
  <input id="username" name="username" type="text" placeholder="Username" class="form-control input-md" required="">

  </div>
</div>

<!-- Password input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="password">password:</label>
  <div class="col-md-4">
    <input id="password" name="password" type="password" placeholder="password" class="form-control input-md" required="">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="email">email:</label>  
  <div class="col-md-4">
  <input id="email" name="email" type="text" placeholder="email" class="form-control input-md" required="">

  </div>
</div>

<!-- Multiple Checkboxes -->
<div class="form-group">
  <label class="col-md-4 control-label" for="checkboxes"></label>
  <div class="col-md-4">
  <div class="checkbox">
    <label for="checkboxes-0">
      <input type="checkbox" name="checkboxes" id="checkboxes-0" value="1">
      By registering you agree to Elephant's Terms of Service and Privacy Policy.
    </label>
    </div>
  </div>
</div>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="singlebutton">Single Button</label>
  <div class="col-md-4">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button>
  </div>
</div>

</fieldset>
</form>

CSS响应表

1 个答案: