Проблема дизайна формы с начальной загрузкой 3 - PullRequest
0 голосов
/ 29 мая 2018

Я не пишу код начальной загрузки, но кое-как, как мне удается это сделать сейчас, но форма выглядит не очень хорошо.есть две проблемы.Как исправить мою проблему.спасибо

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>

1 Ответ

0 голосов
/ 29 мая 2018

вот код для вас:

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...