Question

即使我已将其设置为，Bootstrap输入表单也不居中。这是它的样子：

表格不居中：

enter image description here

正确表格

enter image description here

红色是问题，绿色是我想要的。这是代码。

CSS：

.form-control {
  height: 50px;
  width: 330px;
  padding-left: 5px;
  font-size: 20px;
  font-family: 'Lato', sans-serif;
}

HTML：

           <form class="form-inline" role="form">
               <div class="form-group">
                  <label class="sr-only" for="exampleInputEmail2">Enter email address</label>
                  <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email address">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn">Early Access</button>
                </div>
           </form>

所有帮助都会很棒，谢谢。

Answer 1

this会解决您的问题吗？

刚刚添加了一个包装器：

#wrapper {
  text-align:center;
}

.form-control {
  margin: 0 auto;
}

Answer 2

这些方面的内容如何：

用<div class="container">包裹你的东西，以一切为中心。
为同一个div添加一个id，并将宽度设置为您想要的任何值。
将按钮的宽度设置为100％。

HTML：

<div class="container" id="myContainer">
    <form class="form-inline" role="form">
        <div class="form-group">
            <label class="sr-only" for="exampleInputEmail2">Enter email address</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email address" />
        </div>
        <br>
        <div class="form-group">
            <button id="earlyAccessBtn" type="submit" class="btn">Early Access</button>
        </div>
    </form>
</div>

的CSS：

#myContainer {
    width: 350px;
}

#earlyAccessBtn {
    width: 100%;
}

DEMO

Bootstrap / CSS输入表格不居中

2 个答案: