Bootstrap тянуть вправо не работает - PullRequest
0 голосов
/ 26 мая 2018

У меня проблема с классом начальной загрузки 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>

Ответы [ 2 ]

0 голосов
/ 26 мая 2018

Сначала ваша версия использовала 4.1.1 дозу, не содержащую селектор класса, такой как pull-right, но float-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>
0 голосов
/ 26 мая 2018

Используйте class = "float-right" вместо class = "pull-right" и дайте мне знать, если это работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...