gpt4 book ai didi

html - Bootstrap pull-right 不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 01:14:18 24 4
gpt4 key购买 nike

我对 Bootstrap 类 pull-right 有疑问。我的 span 仍然向左浮动。所以,我不知道为什么 pull-right 类不起作用。

<!DOCTYPE html>
<html lang="cs">

<head>
<meta charset="utf-8">
<meta name="author" content="Vojtěch Matras">
<title>Admin Express Blogs&Magazines</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>

<body>
<header>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<span class="text-light">AdminPanel</span>
<span class="text-light pull-right">[@role][@nickname]</span>
</nav>
</header>
<main>
</main>
</body>

</html>

最佳答案

起初您使用的版本 4.1.1 不包含任何类选择器,如 pull-rightfloat-right。其次,它发生在容器 nav navbar-expand-md 选择器中,它包含一个 CSS 属性,如 justify-content:flex-start; 所以这个你使用 float: left/right; 并不重要 你需要覆盖 justify-content:flex-start;justify-content:space-between; 使用当前基于 Bootstrap 的标记结构,请参见下面我添加的代码段:

<!DOCTYPE html>
<html lang="cs">

<head>
<meta charset="utf-8">
<meta name="author" content="Vojtěch Matras">
<title>Admin Express Blogs&Magazines</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<style type="text/css">
@media (min-width: 768px){
.navbar-expand-md {
justify-content:space-between;
}
}
</style>
</head>

<body>
<header>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<span class="text-light">AdminPanel</span>
<span class="text-light float-right">[@role][@nickname]</span>
</nav>
</header>
<main>
</main>
</body>
</html>

关于html - Bootstrap pull-right 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50543937/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com