twitter-bootstrap-3 相关问题

如何使项目宽度适合Bootstrap 3中的文本长度？我的菜单项比文本短，这导致我的 class="active" 看起来很难看。这是它发生的导航栏... 如何使 <li> 项目宽度适合 Bootstrap 3 中的文本长度？我的菜单项比文本短，这导致我的 class="active" 看起来很难看。这是它发生的导航栏： <div id="menu" class="col-md-1"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Startseite</a></li> <li><a href="kontakt.php">Kontakt</a></li> </ul> </div> 开设.custom_li课程并给予 .custom_li{ display:inline-block; } 编辑为了强制相同的尺寸，我建议使用 max-width 并将其放在一些 media-query 下 li{ display: inline-block; max-width:50%; /* limit width */ word-break:break-all; /* wrap extended text*/ border:1px solid red /* demo */ } 演示在这里一些可选的东西一些可选的东西当我尝试display: inline-block;时，它会移除子弹。相反，我使用 float:left; 让它们仅与文本一样宽，同时保留项目符号。（可选）添加 clear:both; 以将其保留为垂直列表，每个项目都在新行上。 CSS .my-list > li { float: left; clear: both; /* remove this if you want them flowing inline */ } HTML <ul class="my-list"> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> <li>Fourth Item</li> </ul> 如果 display: inline-block; 或 display: block; 弄乱了对齐。然后就用width: fit-content; 通过将 display: inline-block; 添加到适当的元素来防止它成为块。如果您想要详细信息，请发布更多代码，最好是 CSS。我让它可以与以下 css 一起使用： ul { margin: 0 auto; width: fit-content; } li{ display:flex; margin: 0.5rem auto; } 基本上我所做的就是使容器宽度适合内容。使用CSS hack来确保它会使用边距居中。在 li 标签中，我希望内容居中，所以我这样设置使用 display: inline-block 折叠了我的列表项，这是我不想要的。使用 display: block; width: fit-content 就是解决方案。

css twitter-bootstrap twitter-bootstrap-3

回答 6 投票 0

导航菜单不起作用

如何解决引导导航栏面临的这 3 个问题：调整大小时菜单无法正确折叠（窗口变小）将图标放在菜单链接旁边而不是下方有...

html css twitter-bootstrap-3

回答 3 投票 0

Vanilla js 引导布局问题

我正在尝试从 Pixabay api 中获取图像数据，我想显示编辑器选择的图像。问题在于布局。我试图在每行显示 3 或 4 个图像，但布局是

javascript twitter-bootstrap twitter-bootstrap-3

回答 1 投票 0

如何仅使用引导图标？

我有一个带有自己的css文件的项目。现在我想使用一些图标。 Bootstrap 图标是一个不错的选择。但是，我只需要图标。我不需要任何其他东西。我进入自定义页面自定义我的

css twitter-bootstrap twitter-bootstrap-3 glyphicons

回答 4 投票 0

Bootstrap 中的两个并排表格

是否可以在 Bootstrap 3 中并排显示两个表格？每个人都尝试制作每一个 col-md-6，虽然它缩小了宽度，但它们不会彼此相邻包装（相反，一个是在......

twitter-bootstrap twitter-bootstrap-3

回答 4 投票 0

为什么当我单击齿轮图标时没有出现我的 Bootstrap 下拉菜单？

我试图在单击时显示齿轮图标和下拉菜单。这是我的代码，但下拉菜单没有出现。有什么想法我做错了什么吗？我试图在单击时显示齿轮图标和下拉菜单。这是我的代码，但下拉菜单没有出现。有什么想法我做错了什么吗？ <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> </head> <body> <div class="dropdown"> <h4> Drop down menu test: <i class="bi bi-gear" style="cursor: pointer;" data-toggle="dropdown"></i> </h4> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li>  </ul> </div> </body> 您有一些与 docs 和良好的语义标记不相符的内容：切换器应该是一个按钮。标题不是可点击的元素，不应该这样使用，以实现可访问性。下拉菜单必须是其切换器的下一个兄弟。这意味着将其放入标题元素内。不幸的是，从语义角度来看这也很糟糕，因此请考虑重构布局来解决这个问题。不要省略文档中显示的 ARIA 属性，也是为了可访问性。 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> </head> <body> <div class="dropdown"> <h4> Drop down menu test: <button id="dropdownBtn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="bi bi-gear"></i></button> <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownBtn"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </h4> </div> </body> 这是我的“最终”代码，包含@isherwood 的更改 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> </head> <body> <div class="d-flex align-items-center"> <h4 style="display: inline;">Drop down menu test:</h4> <div class="dropdown" style="display: inline-block;" > <button id="dropdownBtn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <i class="bi bi-gear"></i> </button> <ul class="dropdown-menu" aria-labelledby="dropdownBtn"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div> </div> </body>

twitter-bootstrap twitter-bootstrap-3

回答 2 投票 0

使用 $.cookie() 的 cookies 保存多个面板的折叠状态

我正在尝试确定如何使用 $.cookie 保存可折叠面板的折叠状态。到目前为止，这个问题很有帮助，但仍然缺少最终的解决方案。我有什么解决方案...

jquery twitter-bootstrap-3 jquery-cookie

回答 5 投票 0

将 bootstrap 列拆分为 n 行，高度相等，填充父级高度

我对 Bootstrap 很陌生，在尝试重现以下模板时，我正在与网格系统作斗争：在此示例中，我有 3 列：第一列包含一些信息/图片。这个合作...

css twitter-bootstrap-3 row

回答 4 投票 0

Bootstrap 3 中心图像

我试图将图像始终放在某些元素的中间和中心，唯一的问题是它不起作用这是我的代码 CSS .panel - 空{ 宽度：100%；高度：400 像素； /*...