CSS 响应式表单答案

【问题标题】：CSS Responsive FormCSS 响应式表单
【发布时间】：2017-04-15 07:15:05
【问题描述】：

我在尝试使此表单具有响应性时遇到问题。每当我缩小屏幕时，我的表单都不会调整大小。我正在使用引导程序，但我不知道如何做到这一点。我也不知道如何将“电子邮件”标签与其他标签对齐。

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

【问题讨论】：

只是一个小建议，您可以尝试一下 Tacit (github.com/yegor256/tacit) 它是一个 CSS 框架，可帮助您获得响应式外观，无需指定类每个元素。这是一个外观示例页面：yegor256.github.io/tacit

标签： css responsive-design frameworks

【解决方案1】：

由于您已经使用引导程序，因此请利用引导程序 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>

【讨论】：

那么你的 html 中没有包含 bootstrap css 文件。尝试在 html 的 head 标签内添加。 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">