html - 无法使用 bootstrap v4 定位 HTML 元素

Question

我在 header 内有 header 标签 我有一个用于 Logo 的容器和一个用于登录表单的容器。我希望我的 Logo 位于左侧，我的登录表单位于右上角，但是当我将 float-left 设置为 Logo 容器并将 float-right 设置为登录时形式他们打破。我已确保容器的尺寸足以放入，但它们仍然会破裂。

这是我的代码:

<header class="bg-inverse text-white col-sm-12" style="border: 1px solid blue">

  <div id="logo" class="col-sm-8"style="border:1px solid red">
    <h1 class="font-weight-bold">Somelogo</h1>
  </div>

  <div id="login-form" class="col-sm-3">
    <form class="" style="border: 1px solid blue">
      <div class="form-group mb-0">
        <label for="username">Username</label>
        <input type="text" class="form-control form-control-sm" id="username">
      </div>

      <div class="form-group mb-1">
        <label class="pt-1 mb-0" for="Password" style="border: 1px solid blue">Password</label>
        <input type="password" class="form-control form-control-sm" id="password">
      </div>

      <button type="submit" class="btn btn-primary col-sm-5 btn-sm">register</button>
      <button type="submit" class="btn btn-primary col-sm-5 btn-sm">login</button>

    </form>
  </div>

</header>

这是没有设置位置的样子 Picture 1

这是当我将 float:left 设置为具有 id logo 的 div 并将 float:right 设置为具有 id 的 div 时的样子登录表单 Picture 2

这只是将 ID 为 login-form 的 div 设置为 float-right Picture 3

PS:我正在尝试仅使用 bootstrap 4。请解释问题所在，为什么会发生这种情况。

Answer 1

问题是您没有正确使用 Bootstrap 网格。这是一个常见的初学者错误。

Bootstrap 行和列旨在一起工作。

这意味着:您不能将一个 Bootstrap 列直接嵌套到另一个 Bootstrap 列中。如果这样做，您将不可避免地遇到问题，就像这里的情况一样。

解决方案:

当在 Bootstrap 列中嵌套任何内容时，首先将类为 .row 的 div(或其他合适的 HTML 元素)放入该列，然后将类为 .col 的 div 进入该行 div。

错误:

<div class="container">
    <div class="row">
        <div class="col">
            <div class="col"></div>
        </div>
    </div>
</div>

右:

<div class="container">
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col"></div>
            </div>
        </div>
    </div>
</div>

这个选项也可以正常工作:

<div class="container">
    <div class="row">
        <div class="col">
        </div>
    </div>
    <div class="row">
        <div class="col">
        </div>
    </div>
</div>

我怀疑以下是您想要创建的布局:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<div class="container-fluid">
    <div class="row">
        <header class="bg-inverse col-sm-12" style="border: 1px solid blue">
            <div class="row">
                <div id="logo" class="col-sm-8" style="border:1px solid red">
                    <h1 class="font-weight-bold">Somelogo</h1>
                </div>
                <div id="login-form" class="col-sm-3 offset-sm-1">
                    <form class="" style="border: 1px solid blue">
                        <div class="form-group mb-0">
                            <label for="username">Username</label>
                            <input type="text" class="form-control form-control-sm" id="username">
                        </div>
                        <div class="form-group mb-1">
                            <label class="pt-1 mb-0" for="Password" style="border: 1px solid blue">Password</label>
                            <input type="password" class="form-control form-control-sm" id="password">
                        </div>
                        <button type="submit" class="btn btn-primary col-sm-5 btn-sm mb-2 mb-sm-0">register</button>
                        <button type="submit" class="btn btn-primary col-sm-5 btn-sm">login</button>
                    </form>
                </div>
            </div>
        </header>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

注意:

我在上面的代码片段中添加了 .container-fluid 类并删除了 .text-white 类。

附言我在这里添加了另一个我认为比以前更好的版本，但这实际上取决于您的实际需求。在这里:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<header class="bg-inverse" style="border: 1px solid blue">
    <div class="container">
        <div class="row" style="border: 1px solid blue">
            <div id="logo" class="col-sm-8" style="border:1px solid red">
                <h1 class="font-weight-bold">Somelogo</h1>
            </div>
            <div id="login-form" class="col-sm-4 col-lg-3 offset-lg-1">
                <form class="" style="border: 1px solid blue">
                    <div class="form-group mb-0">
                        <label for="username">Username</label>
                        <input type="text" class="form-control form-control-sm" id="username">
                    </div>
                    <div class="form-group mb-1">
                        <label class="pt-1 mb-0" for="Password" style="border: 1px solid blue">Password</label>
                        <input type="password" class="form-control form-control-sm" id="password">
                    </div>
                    <button type="submit" class="btn btn-primary col-sm-5 btn-sm mb-2 mb-sm-0">register</button>
                    <button type="submit" class="btn btn-primary col-sm-5 btn-sm">login</button>
                </form>
            </div>
        </div>
    </div>
</header>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>