Question

我的bootstrap类pull-right有问题。我的span仍悬空。所以，我不知道为什么pull-right课程没有工作。

＆＃13;

<!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>

＆＃13;

Answer 1

首先，您使用的版本4.1.1不包含pull-right但float-right之类的任何类选择器。其次，容器nav navbar-expand-md选择器正在发生，其中包含justify-content:flex-start;等CSS属性，因此使用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>

Answer 2

使用class =＆＃34; float-right＆＃34;而不是class =＆＃34; pull-right＆＃34;并告诉我它是否有效。

Answer 3

使用class =“ float-right”时可能会遇到问题。您应该添加<div class="clearfix"></div>

Bootstrap pull-right不起作用

3 个答案: