Невозможно расположить раскрывающееся меню Bootstrap / popper справа - PullRequest
0 голосов
/ 13 июля 2020

Я учусь использовать сетку css для создания макета и использовать компоненты из bootstrap. Для начала я просто хочу иметь возможность сделать отзывчивый выпадающий список в правом углу. но это не работает. Я знаю, что это очень примитивный вопрос, но до сих пор не могу его решить. Я знаю, что есть много способов сделать это. Я хотел бы узнать общий c способ, с помощью которого я могу также sh выполнять многие другие задачи. Код:

index. html is

<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap
    </title>
  <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>

<div id="mydiv">
  <ul>
 <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="mydiv" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
</div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

style. css is

.container {
display:grid;
grid-template-columns: 900px;
}

Edit: На самом деле прямо сейчас моя цель - научиться CSS сетка из интереса. Я слышал, что многие вещи могут быть выполнены с помощью float, flexbox и т. Д. c, но поскольку я новичок, я не хочу изучать слишком много вещей, я просто хочу изучить CSS Grid настолько хорошо, что я могу выполнять sh даже базовые c вещи используют это быстро. И использование раскрывающегося списка из библиотеки bootstrap было просто быстрым способом получить раскрывающийся код, чтобы изучить концепцию сетки CSS для применения к

Ответы [ 2 ]

1 голос
/ 13 июля 2020

D вам нужен такой результат?

.nav-item {
    display: flex;
    justify-content: flex-end;
}
<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap
    </title>
  <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>

<div id="mydiv">
  <ul>
 <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="mydiv" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
</div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
1 голос
/ 13 июля 2020

Вам нужно сделать 2 вещи:

  1. Bootstrap иметь класс для этого dropdown-menu-right, поэтому просто нужно добавить это в ваш раскрывающийся div: <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
  2. Выровняйте содержимое #mydiv по правому краю так, чтобы метка «Раскрывающийся список» появилась справа: #mydiv { text-align:right; }

Рабочий фрагмент , чтобы увидеть его в действии (обратите внимание, что я также добавил list-style:none; к <ul>, чтобы удалить маркер перед раскрывающимся списком):

li.nav-item.dropdown{
    text-align:right;
    list-style:none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div id="mydiv">
  <ul>
 <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="mydiv" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
</div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...