Question

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

任何帮助都非常有用：

bootply：http://www.bootply.com/125841

我希望它看起来如何：

enter image description here

Answer 1

确定。你把所有东西放在一个div中，用class =＆＃34;所有东西＆＃34;。

.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;
}

Bootstrap将表单放在一起

1 个答案: