Bootstrap：在Carousel Template中相邻的2个表格中心？

I am trying to center two forms sitting next to each other in twitter's bootstrap. This is the template I am using given by Bootstrap

我试图将两个彼此相邻的表格集中在twitter的bootstrap中。这是Bootstrap给出的模板

and this is the code I have so far. What it does is placing them on the top of each other.

这是我到目前为止的代码。它的作用是将它们放在彼此的顶部。

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

Here is the CSS:

这是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;
}

Can someone please help me out with this ? : ) Thanks !

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

1 个解决方案

#1

To get the forms side-by-side, we have to give them a 'float: left' CSS rule, like so:

为了并排获取表单,我们必须给它们一个'float:left'CSS规则,如下所示:

.form-horizontal{
    float: left;   
}

Anyway, here's a JSFiddle with the new CSS: http://jsfiddle.net/4WwLX/1/

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

#1