Question

我是Bootstrap的新手并遇到了一个问题，我已经解决了这个问题 - 但是我想我看看Bootstrap是否有内置的方法来解决这个问题，因为它是公平的标准问题（我原以为）。

我所拥有的是一个简单的登录页面，我希望我的登录表单以所有可能的大小为中心。我使用了bootstrap css col-lg-4 coll-lg-offset-4，它应该使div居中，但它并不是由于包含在所有col大小中的float-left。 quickfix是创建一个css类并将其添加到我的col类：

.nofloat {
 float:none;
}

有没有更好的方法来执行此操作而无需添加到我的自定义CSS？

以下是不会以大屏幕为中心的表单代码：

<div class="container-fluid">
<div class="row">
    <div class="col-lg-4 col-lg-offset-4"> <!-- This is where I add my nofloat current fix -->
      <form role="form" action='<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>' method="post">
        <h2>Please sign in</h2>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" id="inputEmail" name="username" class="form-control" placeholder="Email address" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required>
        <div class="checkbox">
          <label>
              <input type="checkbox" value="remember-me" />Remember me
          </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
        <a href="./forgotPassword.php"><p class="text-center">Forgot password</p></a>
      </form>
    </div>
</div>

</div>

Answer 1

Phil的评论中最好的解决方案是使用Bootstrap'clearfix'类删除'col ...'类中的float元素，如下所示：

<div class="container-fluid">
<div class="row">
    <div class='clearfix'></div>
    <div class="col-lg-4 col-lg-offset-4">
      <form role="form">
....etc

我在问题中引用的解决方案也是声明一个新的CSS类：

.nofloat {
float:none;
}

并在HTML中使用它，如下所示：

<div class="container-fluid">
<div class="row">
    <div class="col-lg-4 col-lg-offset-4 nofloat">
      <form role="form">
....etc

在Bootstrap col上清除浮动到中心div

1 个答案: