Question

我想将表格与div.login__box

中的标签对齐

我使用bootstrap 3.3.7

这就是我想要的方式

<form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-2" for="login">логин</label>
    <div class="col-sm-8">
      <input type="login" class="form-control" id="login" required>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="pwd" >пароль</label>
      <div class="col-sm-8">
        <input type="password" class="form-control" id="pwd" required>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="btn" />
        <div class="col-sm-4">
          <input type="button" class="form-control login__btn-login" id="btn" value="войти в личный кабинет">
          </div>
        </div>
      </form>

我目前的标记在这里 codepen.io

Answer 1

对您的HTML进行了轻微更改：

    <head>
    <meta charset="UTF-8">
      <title>#</title>
      <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
        </head>

        <body>
          <div class="jumbotron vertical-center">
            <div class="container">
              <div class="row">
                  <div class="col-md-4 about__box">
                    <div class="about__inner">
                      <div class="about__content">
                        <div class="about__header">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>

                        <div class="about__desc">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-8 login__box">
                    <div class="login__inner">
                      <div class="text-center login__header">
  Authorization
                      </div>
                      <div class="container login__container">
                        <form class="form-horizontal">
                          <div class="form-group">
                            <label class="control-label col-sm-2 col-sm-offset-2" for="login">log in</label>
                            <div class="col-sm-6">
                              <input type="login" class="form-control" id="login" required>
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="control-label col-sm-2 col-sm-offset-2" for="pwd" >password</label>
                              <div class="col-sm-6">
                                <input type="password" class="form-control" id="pwd" required>
                                </div>
                              </div>
                              <div class="form-group">
                                <label class="control-label col-sm-2  col-sm-offset-2" for="btn" ></label>
                                <div class="col-sm-4">
                                  <input type="button" class="form-control login__btn-login" id="btn" value="submit">
                                  </div>
                                </div>
                              </form>
                              <div class="control-label col-sm-2"></div>
                              <div class="col-sm-8 login__desc">
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                              </div>
                            <img src="" class="pull-right img-responsive login__img_people">
                            </div>

                          </div>
                        </div>
                    </div>
                  </div>
                </div>
                            <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
            <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
              </body>

将此添加到您的css：

.form-horizontal .control-label{
  margin-right:0;
}

附加codepen链接：

http://codepen.io/Sky-123/pen/WGOOqq?editors=1100

希望这会有所帮助!!

Answer 2

将margin-right:auto和margin-left:auto添加到.login__inner，您必须设置宽度：

.login__inner{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

Answer 3

只需将类col-lg-3-offset添加到表单

<form class="form-horizontal col-lg-3-offset col-lg-6">
  <div class="form-group">
    <label class="control-label col-sm-2" for="login">логин</label>
    <div class="col-sm-8">
      <input type="login" class="form-control" id="login" required>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="pwd" >пароль</label>
      <div class="col-sm-8">
        <input type="password" class="form-control" id="pwd" required>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="btn" />
        <div class="col-sm-4">
          <input type="button" class="form-control login__btn-login" id="btn" value="войти в личный кабинет">
          </div>
        </div>
      </form>

如何将表单与div内的标签对齐

3 个答案: