Html 清除引导col至中心div上的浮动

Html 清除引导col至中心div上的浮动,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我对Bootstrap还不熟悉,有一个问题我已经用变通方法解决了——但我想我会看看Bootstrap是否有一个内置的方法来处理这个问题,因为这是一个相当标准的问题(我会想) 我有一个简单的登录页面,我希望我的登录表单以所有可能的大小为中心。我使用了引导css col-lg-4 coll-lg-offset-4,它应该将div居中,但这不是因为所有大小的col都包含了一个浮动。快速修复是创建一个css类并将其添加到我的col类中: .nofloat { float:none; } 有没有更好的

我对Bootstrap还不熟悉,有一个问题我已经用变通方法解决了——但我想我会看看Bootstrap是否有一个内置的方法来处理这个问题,因为这是一个相当标准的问题(我会想)

我有一个简单的登录页面,我希望我的登录表单以所有可能的大小为中心。我使用了引导css col-lg-4 coll-lg-offset-4,它应该将div居中,但这不是因为所有大小的col都包含了一个浮动。快速修复是创建一个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>


Phil评论中对此的最佳解决方案是使用引导“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
<div class="container-fluid">
<div class="row">
    <div class="col-lg-4 col-lg-offset-4 nofloat">
      <form role="form">
....etc
并在HTML中使用它,如下所示:

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

有一个clearfix类很清楚:两者:)谢谢-是的,这似乎很有效。不像我想的那样干净。但只要我没有遗漏一些基本的偏移量,从我所看到的,你的网格遗漏了4列。每行总共需要12列。谢谢@PhilM。-偏移量将相当于4列的内容放在左边,用来处理这种情况。我确实尝试过你的解决方案,移除偏移并放置