html - Bootstrap : Centering 2 forms next to eachother in Carousel Template?

Question

我试图在 Twitter 的 Bootstrap 中将两个相邻的表单居中。这是我使用的模板 Bootstrap

这是我目前的代码。它所做的是将它们放在彼此的顶部。

<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel">
  <div class="carousel-inner">
    <div class="item active">
         <img class="header" src="img/header_bg.jpg" alt="">

        <div class="container">
            <div class="row-fluid">     
                <div class="span12">
                    <div class="logo"><img src="img/logo.png" height="105px" width="96px"></div>
                </div>
            </div>
        </div> <!-- container logo -->

        <div class="container">
            <div class="carousel-caption">
                <form class="form-horizontal">
                      <div class="control-group">
                        <label class="control-label" for="inputEmail">Email</label>
                        <div class="controls">
                          <input type="text" id="inputEmail" placeholder="Email">
                        </div>
                      </div>
                      <div class="control-group">
                        <label class="control-label" for="inputPassword">Password</label>
                        <div class="controls">
                          <input type="password" id="inputPassword" placeholder="Password">
                        </div>
                      </div>
                      <div class="control-group">
                        <div class="controls">
                          <label class="checkbox">
                            <input type="checkbox"> Remember me
                          </label>
                          <button type="submit" class="btn">Sign in</button>
                        </div>
                      </div>
                </form>

                    <form class="form-horizontal">
                      <div class="control-group">
                        <label class="control-label" for="inputEmail">Email</label>
                        <div class="controls">
                          <input type="text" id="inputEmail" placeholder="Email">
                        </div>
                      </div>
                      <div class="control-group">
                        <label class="control-label" for="inputPassword">Password</label>
                        <div class="controls">
                          <input type="password" id="inputPassword" placeholder="Password">
                        </div>
                      </div>
                      <div class="control-group">
                        <div class="controls">
                          <label class="checkbox">
                            <input type="checkbox"> Remember me
                          </label>
                          <button type="submit" class="btn">Sign in</button>
                        </div>
                      </div>
                </form>

        </div>
        </div>



    </div> <!-- item active -->
  </div> <!-- carousel-inner -->
</div><!-- /.carousel -->

这是 CSS:

 /* Carousel base class */
.carousel {
  margin-bottom: 60px;
}

.carousel .container {
  position: relative;
  z-index: 9;
}

.carousel-control {
  height: 80px;
  margin-top: 0;
  font-size: 120px;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
  background-color: transparent;
  border: 0;
  z-index: 10;
}

.carousel .item {
  height: 700px;
}
.carousel img.header {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 700px;
}

.carousel-caption {
  background-color: transparent;
  position: static;
  max-width: 400px;
  margin-top: 100px;
}
.carousel-caption h1,
.carousel-caption .lead {
  margin: 0;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption .btn {
  margin-top: 10px;
}

.logo {
    margin-left:-150px;
    float:left;
}

有人可以帮我解决这个问题吗？ :) 谢谢!

Answer 1

要并排显示表单，我们必须给它们一个“float: left”CSS 规则，如下所示:

.form-horizontal{
    float: left;   
}

无论如何，这是一个带有新 CSS 的 JSFiddle:http://jsfiddle.net/4WwLX/1/