Bootstrap 将表单并排放置

Question

尝试将我最初的三个表单放在容器的中心，并将最后两个表单放在前三个旁边。尝试使用浮动，但没有奏效。

非常感谢任何帮助：

引导层：http://www.bootply.com/125841

我希望它看起来如何：

Answer 1

好的。 你把所有东西都放在一个 class="everything" 的 div 中。

.everything {
    overflow: auto;
    width: 600px;
    margin-left:auto;
    margin-right:auto;
} 

然后您将前三组文本字段放在一个名为 .blocks 的类中，将其他三组文本字段和按钮放在另一个名为 .blocks 的 div 中。

.blocks {
    width: 50%;
    float:left;
}

你来了：

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <form class="form-horizontal" role="form">
                  <div class="block">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                        <div class="col-sm-2">
                            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                          <div class="col-sm-2">
                            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                          </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">Password1</label>
                        <div class="col-sm-2">
                          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                        </div>
                    </div>
                  </div>
                  <div class="block">
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">Password2</label>
                        <div class="col-sm-2">
                          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">Password3</label>
                        <div class="col-sm-2">
                          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                        </div>
                    </div>

                    <div class="form-group">
                      <div class="col-sm-offset-2 col-sm-4">
                        <button id="onlyButton" type="submit" class="btn btn-default">Sign in</button>
                      </div> 
                    </div>
                  </div>
                </form>
            </div>
        </div> 
    </div>
</div>

css:

.jumbotron {


  /*  display: inline-block; */
    margin-bottom: auto;
   margin: 0 auto;
    min-height: 623px;
}

.block {
    width: 50%;
    float: left;

}
.container {

    min-height: 530px;
     /* set border styling */
    border-color: black;
    border-style: solid;
    border-width: 1px;  
    width: 600px;
    margin-right:auto;
    margin-left:auto;
    overflow:auto;


    /* set border roundness */
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;



    margin: 0 auto;
    width: 800px;
  /* display: inline-block; */
    background-color: white;


}

.form-horizontal {

padding-right: 150px;

}

.form-control {
    width: 100px;
    margin-left: 30px;
}

#onlyButton {
    float:right;
}