javascript - Bootstrap dropdown menu items missing style - Stack Overflow

admin管理员组

文章数量:1328004

If I do a search for the class "dropdown-item", I get no results even in the bootstrap.css or .js. Where is this class?

Here's what I get:

With the following code:

        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Action
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </div>

I also have my scripts in the correct order:

<script src="scripts/jquery-3.1.0.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>

and the css:

<link rel="stylesheet" type="text/css" href="Content/bootstrap.min.css" />

All my other controls (navbar, buttons, button groups, etc.) are working well so bootstrap seems to be correctly initialized.

If I do a search for the class "dropdown-item", I get no results even in the bootstrap.css or .js. Where is this class?

Here's what I get:

With the following code:

        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Action
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </div>

I also have my scripts in the correct order:

<script src="scripts/jquery-3.1.0.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>

and the css:

<link rel="stylesheet" type="text/css" href="Content/bootstrap.min.css" />

All my other controls (navbar, buttons, button groups, etc.) are working well so bootstrap seems to be correctly initialized.

• javascript
• css
• twitter-bootstrap

Share Improve this question Follow edited Sep 27, 2016 at 15:25 Bruno asked Sep 27, 2016 at 15:21 BrunoBruno 4,66577 gold badges6060 silver badges115115 bronze badges 5

• Have you attached bootstrap.css as well? – Mohammad Usman Commented Sep 27, 2016 at 15:23
• Add <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> in your head. – LVK Commented Sep 27, 2016 at 15:25
• I do have also the css to bootstrap, sorry – Bruno Commented Sep 27, 2016 at 15:25
• Are you sure the css is in the Content folder? Normally its in the css folder. – LVK Commented Sep 27, 2016 at 15:27
• did you solve this ? – Zzirconium Commented Feb 21, 2018 at 14:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You need to utilize ul and li elements in your dropdown. See your working CODE HERE and below.

<div class="dropdown">
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
             <li><a class="dropdown-item" href="#">Something else here</a></li>
             <div class="dropdown-divider"></div>
             <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>
    </div>
</div>

You need to add a container div with class "dropdown", here's the example from bootstrap website:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

As you can see there is a dropdown class on the wrapper div that you're missing.

Cheers

本文标签： javascriptBootstrap dropdown menu items missing styleStack Overflow