无法使用 bootstrap v4 定位 HTML 元素
Can't position HTML elements using bootstrap v4
我在 header 中有 header 标签 我有一个用于徽标的容器和一个用于登录表单的容器。我希望我的徽标位于左侧，我的登录表单位于右上角，但是当我将 float-left 设置为徽标容器并将 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 为 [=18 的 div 时的样子=]Picture 2
这只是将 ID 为 login-form 的 div 设置为 float-rightPicture 3
PS：我只尝试使用 bootstrap 4。请解释问题是什么，为什么会这样。
您可以尝试以下解决方案，使用 Bootstrap 4 的 flex utilities：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<header class="bg-dark text-white col-sm-12 d-flex justify-content-between align-items-center" 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 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">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>
另一种使用 .container and .row 的解决方案：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<header class="container bg-dark text-white col-sm-12" style="border: 1px solid blue">
<div class="row">
<div id="logo" class="col-sm-8 align-self-center mr-auto" style="border:1px solid red">
<h1 class="font-weight-bold">Somelogo</h1>
</div>
<div id="login-form" class="col-sm-3">
<form 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">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>
</div>
</header>
问题是您没有正确使用 Bootstrap 网格。这是一个常见的初学者错误。
Bootstrap 行和列设计为一起工作。
这意味着：您不能将 Bootstrap 列直接嵌套到另一个 Bootstrap 列中。如果这样做，您将不可避免地 运行 遇到问题，就像这里的情况一样。
解决方案：
当在 Bootstrap 列中嵌套任何内容时，首先将 div（或另一个合适的 HTML 元素）和 class .row 放入其中列，然后将 div 和 class .col 放入该行 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 class 并删除了 .text-white class。
P.S。我在这里添加了另一个我认为比以前更好的版本，但这实际上取决于您的实际需求。这是：
<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>
我在 header 中有 header 标签 我有一个用于徽标的容器和一个用于登录表单的容器。我希望我的徽标位于左侧，我的登录表单位于右上角，但是当我将 float-left 设置为徽标容器并将 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 为 [=18 的 div 时的样子=]Picture 2
这只是将 ID 为 login-form 的 div 设置为 float-rightPicture 3
PS：我只尝试使用 bootstrap 4。请解释问题是什么，为什么会这样。
您可以尝试以下解决方案，使用 Bootstrap 4 的 flex utilities：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<header class="bg-dark text-white col-sm-12 d-flex justify-content-between align-items-center" 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 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">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>
另一种使用 .container and .row 的解决方案：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<header class="container bg-dark text-white col-sm-12" style="border: 1px solid blue">
<div class="row">
<div id="logo" class="col-sm-8 align-self-center mr-auto" style="border:1px solid red">
<h1 class="font-weight-bold">Somelogo</h1>
</div>
<div id="login-form" class="col-sm-3">
<form 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">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>
</div>
</header>
问题是您没有正确使用 Bootstrap 网格。这是一个常见的初学者错误。
Bootstrap 行和列设计为一起工作。
这意味着：您不能将 Bootstrap 列直接嵌套到另一个 Bootstrap 列中。如果这样做，您将不可避免地 运行 遇到问题，就像这里的情况一样。
解决方案：
当在 Bootstrap 列中嵌套任何内容时，首先将 div（或另一个合适的 HTML 元素）和 class .row 放入其中列，然后将 div 和 class .col 放入该行 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 class 并删除了 .text-white class。
P.S。我在这里添加了另一个我认为比以前更好的版本，但这实际上取决于您的实际需求。这是：
<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>