如何在引导程序容器中居中放置表单？

我试图给我的表单一个电子邮件输入字段和一个图像按钮。我的按钮和输入并排排列。我想将我的表单放在引导程序容器类的中间，但没有任何我已经尝试过的。我给了我的表单一个宽度和边距：0 auto，但它根本没有帮助。如何在引导程序容器中居中放置表单？

HTML：

<div class="container"> 
     <div class="text-box-two"> 
      <span id="notification">BE NOTIFIED WHEN WE LAUNCH:</span> 
     </div> 
      <form class="well email-form form-inline" id="emailForm" name="sendEmail" novalidate="" method="post"> 
        <div class="col-sm-6"> 
         <div class="form-group"> 
          <input class="form-control" name="email" id="email-address" type="email" placeholder="ENTER EMAIL ADDRESS" required="" data-validation-required-message=" "/> 
         </div> 
         <div class="form-group button"> 
          <input type="image" src="images/tree.png" name="submitEmail" class="button"/> 
         </div> 
       </div> 
      </form> 
    </div> 
</div>

CSS：

.well.email-form{ 
background-color: #FFFFFF !important; 
border: none !important; 
border-radius: 1px !important; 
} 
#emailForm{ 
width:1115px; 
margin:0 auto; 
} 
.form-group{ 
float:left; 
} 
#emailForm{ 
margin:0 auto; 
} 
.form-control{ 
height:102px; 
border-radius:1px; 
font-size:30px; 
}

来源

2014-11-03 Arwen

你能把我们链接到一个[JSFiddle]（http://jsfiddle.net/） – Cyzanfar 2014-11-03 19:03:04

你可以尝试在'

' – 2014-11-03 19:04:28

包装形式吗？ http://jsfiddle.net/wzr4crfr/13/ – 2014-11-03 19:29:08

使用引导程序框架来做到这一点。看看文档中的offsetting columns。

在上面的容器中试试这个。

<div class="container col-sm-8 col-sm-offset-2">

这里有一个Fiddle与它一起工作。

来源

2014-11-03 19:27:40 pmahomme

如何在引导程序容器中居中放置表单？

回答

相关问题