blocks|key|3026610|text|包括css和js文件，然后您必须使用适当的结构。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3026611|演示：http://jsfiddle.net/Rj8Nd/3/|offset|length|3026612|++<ul+class="nav+nav-pills">
++++<li+class="dropdown">
++++++<a+id="drop4"+role="button"+data-toggle="dropdown"+href="#">Dropdown+<b+class="caret"></a>
++++++<ul+id="menu1"+class="dropdown-menu"+role="menu"+aria-labelledby="drop4">
++++++++<li+role="presentation"><a+role="menuitem"+tabindex="-1"+href="#">Action</a></li>
++++++++<li+role="presentation"><a+role="menuitem"+tabindex="-1"+href="#">Another+action</a></li>
++++++++<li+role="presentation"><a+role="menuitem"+tabindex="-1"+href="#">Something+else+here</a></li>
++++++++<li+role="presentation"+class="divider"></li>
++++++++<li+role="presentation"><a+role="menuitem"+tabindex="-1"+href="#">Separated+link</a></li>
++++++</ul>
++++</li>
++</ul>|code-block|syntax|javascript|3026613|还要小心，在bootstrap.js之前将jquery包含在您的网站中。|3026614|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Rj8Nd/3/^0|0|3|S|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

Include css and js file and then you have to use proper structure.

Demo: <a href="http://jsfiddle.net/Rj8Nd/3/" rel="nofollow">http://jsfiddle.net/Rj8Nd/3/</a>

<pre><code> &lt;ul class="nav nav-pills"&gt;
 &lt;li class="dropdown"&gt;
 &lt;a id="drop4" role="button" data-toggle="dropdown" href="#"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
 &lt;ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4"&gt;
 &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
 &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
 &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
 &lt;li role="presentation" class="divider"&gt;&lt;/li&gt;
 &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
</code></pre>

Also be careful to include jquery before bootstrap.js in your website.

blocks|key|3055409|text|首先，您还没有加载引导程序，所以它看起来不太好看。它显示得不好，但我不知道你所说的“浏览器空”是什么意思.在我看来是这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3055410|​|3055411|📷|atomic|offset|length|3055412|3055413|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/68dfb5fb3281e5b6320cc751a24c738f.png|imageAlt^0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@$G|V|H|W|1|X]]|A|$]]|$1|I|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q|R|-4]]]]

First of all, you haven't loaded bootstrap, so it's not going to look pretty. It isn't displaying nicely, but I'm not sure what you mean by "browser empty"... It looks like this to me:

<img src="https://i.stack.imgur.com/7YCQl.png" alt="screenshot">

blocks|key|3055420|text|当我忘记在JQuery之前包括bootstrap.js时，这似乎是我遇到的一个问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3055421|包括Jquery吗？它是在引导之前加载的吗？|3055422|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

That looks like a problem i had when i forgot to include JQuery before bootstrap.js

Is Jquery included? Is it loaded before bootstrap?

blocks|key|1526469|text|如果删除类sr-only，就会看到它。sr-only将高度/宽度设置为1+1px，并执行一些非常奇怪的隐藏活动。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1526470|entityMap^0|5|7|J|7|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

If you delete the class <code>sr-only</code> you'll see it. <code>sr-only</code> sets height/width to 1px and does some really strange hiding activity.

I'm working in a template with bootstrap 3, the dropdown menu looks really complicated and I do not understand.

<pre><code> &lt;div class="dropdown"&gt;
 &lt;button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown"&gt;
 Dropdown
 &lt;span class="caret"&gt;&lt;/span&gt;
 &lt;/button&gt;
 &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"&gt;
 &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
 &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
 &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
 &lt;li role="presentation" class="divider"&gt;&lt;/li&gt;
 &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
</code></pre>

That is my code I copy it from <a href="http://prntscr.com/2g8507" rel="nofollow">http://prntscr.com/2g8507</a> . My browser is empty, and don't know why. 0 errors at inspect element. The CSS file is connected and so is the js.

Bootstrap Dropdown is not styled

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在使用引导3的模板工作，下拉菜单看起来非常复杂，我不明白。 <div class="dropdown"> <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dro...

问引导下拉列表没有样式化。
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导下拉列表没有样式化。EN