Question

我不编写引导代码，但有些我现在设法做到但是表单看起来不太好。有两个问题。如何解决我的问题。感谢

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>

Answer 1

这是给你的代码：

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

检查这个小提琴：https://jsfiddle.net/sh8k20xx/

表单设计问题与bootstrap 3

1 个答案: