twitter-bootstrap 相关问题

Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。

Bootstrap Datepicker - 月份和年份没有间距

我正在使用 http://eternicode.github.io/bootstrap-datepicker/ 的 Bootstrap 日期选择器，在示例中，他们显示了它的格式，并很好地显示了月份之间的间距......

javascript jquery css twitter-bootstrap datepicker

回答 3 投票 0

Laravel 10 使用 Bootstrap 5 安装 Breeze？

我想寻求一点帮助。有没有办法在 Laravel 10 中使用 Bootstrap 5 框架而不是 Taiwind 安装 Breeze？你能描述一下步骤吗？或者我只是安装并重新格式化...

php laravel twitter-bootstrap

回答 2 投票 0

引导导航栏折叠按钮未显示

我正在使用引导程序制作一个应用程序，并且有一个导航栏，但是由于某种原因，当我调整页面大小时，链接消失，但切换按钮不显示。这是我的导航栏：我正在使用引导程序制作一个应用程序，并且有一个导航栏，但是由于某种原因，当我调整页面大小时，链接会消失，但切换按钮不会显示。这是我的导航栏： <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <div class="navbar-brand">title</div> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ul> </div> </nav> 任何解决此问题的帮助将不胜感激。您的代码中目前没有切换按钮。尝试在折叠之前和导航栏标题之后放置以下内容： <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> http://www.w3schools.com/bootstrap/bootstrap_navbar.asp <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </nav> <div class="container"> <h3>Collapsible Navbar</h3> <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). <p>Only when the button is clicked, the navigation bar will be displayed.</p> </div> 您还没有添加切换按钮，正如我在代码中看到的那样 <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar-brand">title</div> </div> 有关更多详细信息，请参阅导航栏文档（引导程序）在我的例子中，我使用的是bootstrap5，但是我使用的是旧版本的类，在更改如下代码后，它通过 BS5 W2Schools 对我有用： <nav class="navbar navbar-expand-sm bg-dark"> <div class="container-fluid"> <a href="#" class="navbar-brand">Recipe Book</a> <ul class="nav navbar-nav"> <li class="nav-item" routerLinkActive="active"> <a class="nav-link" routerLink="/recipes">Recipes</a> </li> <li class="nav-item" routerLinkActive="active"> <a class="nav-link" routerLink="/shopping-list">Shopping List</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="nav-item dropdown" appDropdown> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Manage<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Save Data</a></li> <li><a class="dropdown-item" href="#">Fetch Data</a></li> </ul> </li> </ul> </div> </nav> 参考：https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_navbar_dropdown&stacked=h 对我来说，愚蠢的是我应该使用 bootstrap 3，NOT bootstrap 5，我一开始就安装了。无论我做什么，带有 collapse 的 div 就是没有出现。😣 所以我改成bootstrap 3，一切都开始正常工作了！😲😓

html css twitter-bootstrap

回答 4 投票 0

如何在按下按钮时实现波纹样式

你好，我正在学习CSS，想知道如何实现上面的样式。什么样的效果/风格叫什么？我以前从未实施过类似的事情，所以我不知道在哪里...

css twitter-bootstrap

回答 3 投票 0

如何获得只有15分钟的间隔？

我试图在分钟下拉列表中仅获取这些值，00 15 30 和 45，我们该如何解决这个问题？我需要像下面的截图。使用下面的代码它可以工作，但我无法隐藏之间的值...

html twitter-bootstrap

回答 1 投票 0

点击时选择2（未选择），显示加载微调器javascript

好的，我的代码非常简单。我正在使用示例数据，但在我的真实代码中，单击 select2 下拉列表后，数据需要很长时间才能加载并反驳我想要包含加载旋转...

javascript jquery ruby-on-rails twitter-bootstrap

回答 2 投票 0

如何制作这个背景

我正在 Bootstrap 5 中编写一个网站，但我不知道如何正确制作这个背景（https://postimg.cc/xJymRpVf）。有人能帮助我吗？这是我的部分的代码。我正在 Bootstrap 5 中编写一个网站，但我不知道如何正确制作这个背景（https://postimg.cc/xJymRpVf）。有人可以帮我吗？这是我的部分的代码。 <section class="py-5"> <div class="container"> <div class="row justify-content-center"> <div class="col-lg-9 col-12 py-5"> <h2 class="fw-bold text-blue">Přidejte se mezi úspěšné franšízové sítě </h2> <p class="mt-4">Čekáte, až si Vás franšízanti sami najdou? Máme bohaté zkušenosti s akvizicí franšízantl pro úspěšné sítě a rozvíjíme také jejich obchodní strategii.</p> </div> </div> <div class="row justify-content-center"> <div class="col-lg-9 col-12 mb-3"> <p class="h4 fw-bold text-blue">Síť tradičního holičství na 15 místech</p> </div> </div> <div class="row justify-content-center"> <div class="col-lg-9 col-12"> <div class="row"> <div class="col-lg-6 col-12"> <img src="img/barber.jpg" class="img-fluid"> </div> <div class="col-lg-6 col-12"> <div class="card radius-bottom bg-primary p-4 text-white h-100 d-flex justify-content-center"> <p class="h5 fw-bold">Royal Barber & Shop</p> <ul class="small"> <li>Tvoříme obchodní strategii</li> <li>Hledáme motivované franšízanty</li> <li>Spuštěné on-line kampaně k propagaci</li> </ul> <p class="fw-bold">15 poboček, 1 000 zákazníků</p> </div> </div> </div> <div class="col-12 text-center mt-5"> <a href="#" class="btn btn-lg bg-success rounded-pill text-white fw-bold px-5">Pojďme spolupracovat</a> </div> </div> </div> </div> </section> 我不知道如何正确地做到这一点：/ 这是一个图像如果您可以访问包含背景图像的网站，您可以从检查中获取它作为 URL 不幸的是，这是一个图形设计，我必须编码

css twitter-bootstrap background background-image bootstrap-5

回答 2 投票 0

如何删除其他分钟值？

我试图在分钟下拉列表中仅获取这些值，00 15 30 和 45，我们该如何解决这个问题？我需要像下面的截图。我试图在分钟下拉列表中仅获取这些值，00 15 30 和 45，我们该如何解决这个问题？我需要像下面的截图。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Week Ending View</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css'> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://unpkg.com/[email protected]/js/gijgo.min.js" type="text/javascript"></script> <link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="field"> <label class="form-label">Start Time</label> <div class="input-group mb-3"> <input id="timeInput" type="time" class="form-control" placeholder="Time To Enter" aria-label="time to enter" aria-describedby="basic-addon1" step="900"> </div> </div> </body> <script> // Add an event listener for when the input changes timeInput.addEventListener('input', function() { // Get the current value of the input var currentTime = timeInput.value; // Split the current time into hours and minutes var parts = currentTime.split(':'); var hours = parseInt(parts[0]); // Set the minutes to the nearest 15-minute interval var minutes = 0; var currentMinutes = parseInt(parts[1]); if (currentMinutes >= 0 && currentMinutes < 8) { minutes = 0; } else if (currentMinutes >= 8 && currentMinutes < 23) { minutes = 15; } else if (currentMinutes >= 23 && currentMinutes < 38) { minutes = 30; } else if (currentMinutes >= 38 && currentMinutes < 53) { minutes = 45; } else { minutes = 0; hours += 1; } // Format the adjusted time var adjustedTime = (hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes; // Set the adjusted time back to the input timeInput.value = adjustedTime; }); </script> </html> 使用上面的代码可以工作，但我无法隐藏 00 和 15、15 和 30、30 和 45 之间的值。有人知道如何解决这个问题吗？预先感谢您。 input[type="time"]::-webkit-datetime-edit-minute-field, input[type="time"]::-webkit-datetime-edit-second-field { display: none; } input[type="time"]::-webkit-inner-spin-button { display: none; /* Hide the spin buttons */ } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <input type="time" name="myTime" step="3600"> </body> </html>

html twitter-bootstrap

回答 1 投票 0

如何在不关闭旧模态的情况下打开多个 Bootstrap 5 模态？

对于我的项目，我使用 bootstrap 5.2 及之前的版本，如 bootstrap 3。在 3 中，可以打开多个模态，例如前面的模态，然后打开一个新模态，依此类推。模态窗口与每个

css twitter-bootstrap bootstrap-modal bootstrap-5

回答 2 投票 0

Bootstrap 4 中的 .btn-default 去哪儿了？

根据 Bootstrap 3 到 Bootstrap 4 迁移文档：纽扣将 .btn-default 重命名为 .btn-secondary。但 Bootstrap 4 .btn-secondary 看起来一点也不像旧的默认按钮。

twitter-bootstrap twitter-bootstrap-3 bootstrap-4

回答 3 投票 0

Bootstrap 5 垂直线宽度不起作用

我有一个带有两列的引导行，我想在它们之间添加一个垂直分隔线。我使用了 bootstrap 的 vr 类，如下所示，但分隔线的宽度比预期的要宽我有一个带有两列的引导行，我想在它们之间添加一个垂直分隔线。我使用了 vr 类的引导程序，如下所示，但分隔线的宽度比预期更宽 <!DOCTYPE html> <html> <head>  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> <title>Page Title</title> </head> <body> <div class="row"> <div class="col"> <input type="text" class="form-control" placeholder="First name" aria-label="First name"> </div> <div class="vr"></div> <div class="col"> <input type="text" class="form-control" placeholder="Last name" aria-label="Last name"> </div> </div>  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script> </body> </html> 我今天也遇到了同样的问题。我通过从 vr 元素中删除填充来解决它 <div class="vr p-0" ></div>

twitter-bootstrap

回答 1 投票 0

jQueryUI Tooltips 正在与 Twitter Bootstrap 竞争

我已经能够获得一些工具提示，最终可以使用以下代码：将鼠标悬停在我上方进而 $('...</desc> <question vote="160"> <p>我终于能够通过以下代码获得一些工具提示来工作：<em> </em><code><a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a> </code></p> <pre>然后</pre> <p><code><script> $('[rel=tooltip]').tooltip(); </script> </code></p> <pre>我遇到的问题是它使用 jQueryUI 工具提示（没有箭头，又大又丑的工具提示）而不是 Bootstraps。</pre> <p>我需要做什么才能使用 Bootstrap Tooltips 而不是 jQueryUI？</p> <p> </p> </question>jQuery UI 和 Bootstrap 都使用 <answer tick="false" vote="205"><code>tooltip</code><p> 作为插件名称。使用 <pre><code>$.widget.bridge</code></pre> 为 jQuery UI 版本创建一个不同的名称，并允许 Bootstrap 插件保留命名为 tooltip （尝试在 Bootstrap 小部件上使用 <pre><code>noConflict</code></pre> 选项只会导致很多错误，因为它无法正常工作； <pre>该问题已在此处报告</pre>）：<a href="https://github.com/twbs/bootstrap/issues/6303#issuecomment-12715745" rel="nofollow noreferrer"> </a><code>$.widget.bridge('uitooltip', $.ui.tooltip); </code></p> <pre>因此，使其工作的代码：</pre> <p><code> <script src="/js/jquery.js"></script> <script src="/js/jquery-ui.js"></script> <script> // Resolve name collision between jQuery UI and Twitter Bootstrap $.widget.bridge('uitooltip', $.ui.tooltip); </script>  <script src="js/bootstrap.js"></script> </code></p> <pre>JQuery 工具提示可以通过以下方式实例化：</pre> <p><code>$('.someclass').uitooltip(); </code></p> <pre>很好的复制粘贴代码，还可以处理按钮冲突：</pre> <p><code><script src="/js/jquery.js"></script> <script src="/js/jquery-ui.js"></script> <script> $.widget.bridge('uibutton', $.ui.button); $.widget.bridge('uitooltip', $.ui.tooltip); </script> <script src="/js/bootstrap.js"></script> </code></p> <pre> </pre> </answer>一个简单的解决方案是在 jquery-ui.js 之后加载 bootrap.js，这样 bootstrap .tooltip 方法优先。<answer tick="false" vote="78"> <p> </p> </answer>如果您必须在 <answer tick="false" vote="38"><code>jquery-ui.js</code><p> 之后加载 <pre><code>bootstrap.js</code></pre>，请执行以下操作：<pre> </pre></p><p> </p> <div data-babel="false" data-lang="js" data-hide="false" data-console="true"><code><script type="application/javascript" src="/js/jquery.js"></script> <script type="application/javascript" src="/js/bootstrap.js"></script> <script>var _tooltip = jQuery.fn.tooltip;</script> <script type="application/javascript" src="/js/jquery-ui.js"></script> <script>jQuery.fn.tooltip = _tooltip;</script></code><div> <pre> </pre> </div></div> <p>这将覆盖 jquery-ui 的工具提示并始终使用引导程序。 </p> <p> </p> </answer>这对我有用：<answer tick="false" vote="33"> <p>如果您需要使用 JQuery-UI 但又想使用 bootstrap 的工具提示，只需从此</p>网站<p>获取 JQuery-UI 的自定义版本。<a href="http://jqueryui.com/download/"> </a>只需取消选中“工具提示”选项，然后下载它（它将类似于“jquery-ui-1.10.4.custom.js”）。</p> <p>只需将其添加到您的项目中，而不是您当前正在使用的版本，您就可以开始聚会了。这样就可以避免冲突。它对我来说就像一个魅力！</p> <p> </p> </answer>假设UI会在bootsrap初始化后调用<answer tick="false" vote="23"> <p>在 UI 初始化之前存储引导函数</p> <p><code>jQuery.fn.bstooltip = jQuery.fn.tooltip; </code></p> <pre>然后调用如下</pre> <p><code>$('.targetClass').bstooltip(); </code></p> <pre> </pre> </answer>只使用 Bootstrap 弹出窗口怎么样？ BS 弹出窗口不会产生相同的冲突，尽管它们需要相同的 tooltip.js 组件。是的，它们更加风格化，但不会导致我的 JQuery UI 按钮变得不稳定。 <answer tick="false" vote="11"> <p>我仅将 Jquery UI 用于自定义自动完成/组合框（因此不能声称其他 JQ-UI 控件没问题），并且上述方法都无法解决调用 BS Tooltips 时组合框按钮变得“无样式”的 CSS 问题。切换到 BS Popover 提供了基本相同的效果，没有冲突，无需重新排序我的脚本导入，也不需要显式的桥接语句。</p> <p> </p> </answer><answer tick="false" vote="10">这个解决方案<p>似乎对我来说效果很好。<a href="https://github.com/twitter/bootstrap/issues/6303#issuecomment-12715745" rel="noreferrer"> </a><code>// handle jQuery plugin naming conflict between jQuery UI and Bootstrap $.widget.bridge('uibutton', $.ui.button); $.widget.bridge('uitooltip', $.ui.tooltip); </code></p> <pre> </pre> </answer>尝试使用 <answer tick="false" vote="3">jQuery.noConflict()<p> 看看这是否对你有帮助。看起来 bootstrap 和 jQuery 使用相同的命名空间，也许 bootstrap 和 jQuery 工具提示被加载到同一个函数中，或者先加载一个。<a href="http://api.jquery.com/jQuery.noConflict/" rel="nofollow"> </a>您还可以检查首先加载哪个库。通常，如果您在 javascript 中声明同一函数两次，则使用第二个函数。</p> <p>第三，检查 jQueryUI 包（</p>在他们的网站上）<p>，看看是否可以下载不包含工具提示的版本（我检查过，这是完全可行的）。<a href="http://jqueryui.com/download/" rel="nofollow"> </a> </p> </answer>有一个简单又好的解决方案，只需重新排列 bootstrap 和 jquery ui 文件链接，如下所示：<answer tick="false" vote="3"> <p><code> <script src="/js/jquery-ui.min.js" type="text/javascript"></script> <script src="/js/bootstrap.min.js" type="text/javascript"></script> </code></p> <pre>只需在加载 boostrap js 文件之前加载 jQueryui 即可。这对我来说是工作。</pre> <p> </p> </answer>一个简单的方法是在 jquery-ui.js 之后加载 bootstrap.js，以便 bootstrap .tooltip 覆盖 jquery UI。如果您使用像 requirejs 这样的模块加载器，那么您可以使 bootstrap 依赖于 jquery-ui，如下所示： <answer tick="false" vote="1"> <p><code>requirejs.config({ baseUrl: 'js', waitSeconds: 30, shim: { 'bootstrap': { deps: [ 'jquery', 'jquery-ui' ] },... </code></p> <pre> </pre> </answer>另一种方法是下载 jquery UI 的自定义版本。<answer tick="false" vote="1"> <p>排除不需要的内容，在本例中为工具提示。</p> <p>可以从这里下载</p>https://jqueryui.com/download/<p><a href="https://jqueryui.com/download/" rel="nofollow noreferrer"> </a>这样您就可以将其包含在任何地方</p> <p> </p> </answer>万一你...<answer tick="false" vote="1"> <p> </p>不想在 jQuery UI 之后加载引导程序并且<ol> <li></li><code>$.widget.bridge</code><li> 和 <pre><code>noConflict</code></pre> 不适合您并且<pre> </pre>您不想覆盖 jQuery UI 工具提示</li> <li> </li>那么重新启用引导工具提示的另一种方法如下：</ol> <p><code><script src="/js/bootstrap.js"></script> <script> var bsTooltip = $.fn.tooltip; </script> <script src="/js/jquery-ui.js"></script> </code></p> <pre>然后你可以这样初始化引导工具提示：</pre> <p><code>// initialize tooltips bsTooltip.call( $( "[data-toggle='tooltip']" ) ); </code></p> <pre> </pre> </answer>假设UI会在Bootsrap初始化后调用（并且不能改变Bootstrap >> UI的顺序），放在bootstrap import之后：<answer tick="false" vote="0"> <p><code>jQuery.fn.bstooltip = jQuery.fn.tooltip; </code></p> <pre>那么毕竟：</pre> <p><code>jQuery.fn.uitooltip = jQuery.fn.tooltip; jQuery.fn.tooltip = jQuery.fn.bstooltip; </code></p> <pre>所以当你使用 </pre><code>$(".selector").tooltip()</code><p> 时，它将是 Bootstrap 的。您仍然可以使用 UI 版本 <pre><code>$(".selector").uitooltip()</code></pre>。<pre> </pre> </p></answer>

jquery-ui twitter-bootstrap

回答 0 投票 0

使用 Bootstrap 的 HTML 页面在 1366x768 分辨率下看起来放大了

我正在使用Bootstrap开发一个网页，它在分辨率为1920x1080的笔记本电脑上显示良好。然而，在 1366x768 分辨率的屏幕上，页面看起来过度放大，并且

html twitter-bootstrap bootstrap-5

回答 1 投票 0

带有 Bootstrap 5 的 HTML 页面在 1920x1080 的笔记本电脑上看起来不错，但在 1366x768 的笔记本电脑上看起来放大太多了

我正在尝试使用 bootstrap 制作一个 html 页面，该页面在 1920x1080 的笔记本电脑上看起来很好，但在 1366x768 的笔记本电脑上看起来放大太多，元素看起来又大又难看，我该如何修复，请建议...

html twitter-bootstrap bootstrap-5

回答 1 投票 0

如何让<li>项目宽度适合文本长度？

如何使项目宽度适合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

从 Angular 组件更新 Bootstrap 选项卡

根据引导文档，您可以通过 JavaScript 以编程方式激活选项卡；例如： const triggerEl = document.querySelector('#myTab 按钮[data-bs-target="#profile"]')

javascript angular twitter-bootstrap

回答 2 投票 0

Bootstrap 5 根据导航栏高度向下推列

如何根据顶部固定的导航栏高度将最左边的列下推？这是我的 HTML： <

css twitter-bootstrap bootstrap-5

回答 1 投票 0

为什么我的列边框不是全高？

使用Bootstrap 5.3。我希望三列中的所有内容都垂直对齐，因此我在.row中添加了align-items-center。但边框似乎并没有拉伸到顶部和底部（...