Раскрывающееся меню начальной загрузки не отображается внутри "col" - PullRequest
Новая
       1

Раскрывающееся меню начальной загрузки не отображается внутри "col"

0 голосов
/ 12 октября 2018

Итак, вот мой код в html 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container-fluid p-0">
        <div class="col bg-primary" style="max-width: 200px;">
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Regular link</a>
              <a class="dropdown-item active" href="#">Active link</a>
              <a class="dropdown-item" href="#">Another link</a>
            </div>
        </div>
      </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="jquery-3.3.1.slim.min.js"></script>
    <script src="popper.min.js"></script>
    <script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
  </body>
</html>

Вместо меню внутри <div class="col bg-primary" style="max-width: 200px;"> В качестве размера div я получаю маленькую голубую полоску сверху. Я попытался добавить clearfix перед выпадающим меню.т работал

Ответы [ 2 ]

0 голосов
/ 12 октября 2018 

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css">

    <title>Hello, world!</title>
</head>

<body>
    <div class="container">

        <div class="row">
            <div class="dropdown">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    Dropdown button
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Regular link</a>
                    <a class="dropdown-item" href="#">Active link</a>
                    <a class="dropdown-item" href="#">Another link</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
</body>

</html>

Кажется, вам не хватает некоторых классов div и css.

0 голосов
/ 12 октября 2018

Попробуйте это 

<div class="container-fluid p-0">
            <div class="col bg-primary" style="max-width: 200px;">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Your Drop Down Button
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Regular link</a>
                            <a class="dropdown-item active" href="#">Active link</a>
                            <a class="dropdown-item" href="#">Another link</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...