Forms bootstrap 3的表单设计问题_Forms_Twitter Bootstrap 3

Forms bootstrap 3的表单设计问题

forms twitter-bootstrap-3

Forms bootstrap 3的表单设计问题,forms,twitter-bootstrap-3,Forms,Twitter Bootstrap 3,我并没有写引导代码，但我知道我现在是如何做到的，但表单看起来不太好。有两个问题。如何解决我的问题。谢谢 1）按钮没有正确对齐。 2）如何在两个按钮之间创建间隙 <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-con

我并没有写引导代码，但我知道我现在是如何做到的，但表单看起来不太好。有两个问题。如何解决我的问题。谢谢

1）按钮没有正确对齐。 2）如何在两个按钮之间创建间隙

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleTextarea">Example textarea</label>
        <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
    </div>

    <div class="row">
        <div class="form-group">
            <div class="col-md-2 form-group">
                <label for="textbox1">Phone No</label>
                <input class="form-control" id="textbox1" type="text" />
            </div>
            <div class="col-md-2 form-group">
                <label for="textbox2">Post Code</label>
                <input class="form-control" id="textbox2" type="text" />
            </div>
            <span class="clearfix"></span>
            <button type="submit" class="btn btn-primary">Submit</button>
            <button type="reset" class="btn btn-primary" value="Reset">Reset</button>
        </div>
    </div>
</form>


电子邮件地址
我们永远不会与其他人共享您的电子邮件。
密码
示例文本区域
电话号码
邮政编码
提交
重置

以下是您的代码：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <style>
  .m{
    margin:10px; 
  }
 </style>
  </head>

  <body style="background-color: green">
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
            <label for="exampleTextarea">Example textarea</label>
            <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
        </div>

        <div class="row">
            <div class="form-group">
                <div class="col-md-2 form-group">
                    <label for="textbox1">Phone No</label>
                    <input class="form-control" id="textbox1" type="text" />
                </div>
                <div class="col-md-2 form-group">
                    <label for="textbox2">Post Code</label>
                    <input class="form-control" id="textbox2" type="text" />
                </div>
                <span class="clearfix"></span>
                <button type="submit" class="btn btn-primary m">Submit</button>
                <button type="reset" class="btn btn-primary m"  value="Reset">Reset</button>
            </div>
        </div>
    </form> </body>
</html>


m{
利润率：10px；
}
电子邮件地址
我们永远不会与其他人共享您的电子邮件。
密码
示例文本区域
电话号码
邮政编码
提交
重置

检查这个提琴：

我测试了你的代码，但文本框左对齐和按钮左对齐不一样。电话号码和电话号码文本框应该在同一行，但你的样本显示两个在不同的行一个接一个…我不想。文本框开始和按钮开始应该在相同的位置，但当我测试你的样本时，我看到按钮移动更多的是右边。你不能让文本框以这种引导格式并排出现，因为你必须使用网格系统并更改整个代码。希望这有助于在这种格式中使用它的uses block inline，这就是为什么它中有换行符可能是你所说的，你必须使用引导网格你可以给出一个公认的答案