twitter-bootstrap 相关问题

我采用了以下引导导航栏... 我采用了以下引导导航栏... <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <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> </div> </nav> 我对这个导航栏的问题是，当屏幕变小时，导航栏会改变它的排列方式调整大小之前... 调整大小后... 如何防止 bootstrap 重新排列导航栏？我应该添加/删除哪些属性以确保始终看起来像第一张图片。溢出是允许的，我只需要确保它保持其形状即可。我明白了，我改变了...... <ul class="nav navbar-nav"> ...改为常规 ul，而不是 bootstrap 预定义的，所以我将其更改为... <ul class="nav"> 之后就非常简单了，我将每个ul向左浮动，以便它们水平对齐。然后我将它们全部放在一个固定宽度的 div 内，以防止它们折叠。打开调试工具你可以看到有很多媒体查询@media (min-width: 768px)样式规则，这些规则仅在屏幕宽度大于768px时有效。因此，当您调整屏幕尺寸时，导航栏样式会发生变化。如果您想在所有屏幕尺寸上保留样式，只需修改这些媒体查询以使这些样式规则适用于所有屏幕尺寸。 style="max-width: 100vw;"

html css twitter-bootstrap

回答 3 投票 0

Select2 正在复制我的下拉列表

Select2 正在复制我的下拉列表，因此我既有原始选择列表，也有 select2 选择框，我无法在项目之外重新创建它，因此它可能是一个导入...

jquery html twitter-bootstrap flask jquery-select2

回答 4 投票 0

安装 Bower/npm 依赖项的一部分。就像引导网格

有没有办法使用 npm 或 Bower 安装部分依赖项，例如仅 bootstrap-grid 而不是整个 bootstrap（如 bootstrap 的可自定义下载中提供的）？或任何其他

twitter-bootstrap npm bower

回答 2 投票 0

Boostrap 导航选项卡使用锚链接来显示选项卡

当前使用 bootstrap 5.0（只是直接的 html/css），并且无法确定如何获取锚链接来打开选项卡。 ... 当前使用 bootstrap 5.0（只是直接 html/css），并且无法确定如何获取锚链接来打开选项卡。 <div class="tab-content" id="tabContent"> <div class="tab-pane fade show active" id="home"> CONTENT FOR HOME </div> <div class="tab-pane fade show" id="onboard"> <a href="#build" data-bs-toggle="tab" data-bs-target="#build">Show Build tab</a> </div> <div class="tab-pane fade show active" id="build"> CONTENT FOR HOME </div> </div> <ul class="info-navigation" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Start</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-onboard-tab" data-bs-toggle="pill" data-bs-target="#onboard" type="button" role="tab" aria-controls="pills-onboard" aria-selected="false">1</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-build-tab" data-bs-toggle="pill" data-bs-target="#build" type="button" role="tab" aria-controls="pills-build" aria-selected="false">2</button> </li> </ul> 只是希望能够在选项卡面板本身中添加锚链接或按钮，以打开下一个/目标选项卡。尝试使用data-bs-toggle="pill" data-bs-target="#build"但并没有真正起作用。您可以利用 Bootstrap 的 JavaScript API。通过在链接中添加事件监听器并使用Tab.show()方法，您可以切换到您需要的选项卡参考链接：https://getbootstrap.com/docs/5.3/components/navs-tabs/#methods document.getElementById('openBuildTab').addEventListener('click', function(event) { event.preventDefault(); var buildTab = new bootstrap.Tab(document.getElementById('pills-build-tab')); buildTab.show(); }); <div class="container mt-5"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-onboard-tab" data-bs-toggle="pill" data-bs-target="#onboard" type="button" role="tab" aria-controls="pills-onboard" aria-selected="false">Onboard</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-build-tab" data-bs-toggle="pill" data-bs-target="#build" type="button" role="tab" aria-controls="pills-build" aria-selected="false">Build</button> </li> </ul> <div class="tab-content" id="tabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="pills-home-tab"> CONTENT FOR HOME </div> <div class="tab-pane fade" id="onboard" role="tabpanel" aria-labelledby="pills-onboard-tab"> <a href="#" id="openBuildTab">Show Build tab</a> </div> <div class="tab-pane fade" id="build" role="tabpanel" aria-labelledby="pills-build-tab"> CONTENT FOR BUILD </div> </div> </div>

twitter-bootstrap nav

回答 1 投票 0

我正在尝试使用 Flexbox 显示集合网格，但我无法获得正确的布局

我正在尝试使用 Flexbox 实现以下响应式布局，如下图所示。我尝试了一些东西，但没有得到想要的结果。该设计中的每个项目都有一个图像和顶部...

html css twitter-bootstrap flexbox

回答 2 投票 0

引导左侧两行，右侧一行

我想使用引导网格系统创建类似的东西：但我似乎无法将 COLUMN1 和 COLUMN2 一个接一个地放置而不在它们之间产生间隙（由于 COLUMN 3 的高度......

javascript twitter-bootstrap

回答 2 投票 0

使 Bootstrap 5 的尺寸实用程序响应式

在 Bootstrap 文档中，我学习了如何使用大小调整实用程序。例如：在 Bootstrap 文档中，我学习了如何使用大小调整实用程序。例如： <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <div class="card w-75"> <div class="card-body"> <h5 class="card-title">Card title</h5> <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> 使用 w-75 类，我可以指定 card 相对于父级的宽度。但是我怎样才能使这个尺寸响应呢？例如，当视口为w-100时，我想将其设为全尺寸（< md）。什么是正确的语法？我在文档中找不到此信息。 Bootstrap 没有提供这一点，因为创建一个约束卡片的结构网格并让卡片填充网格通常是更好的策略。查看 grid 文档。如果您仍然想走这条路，只需创建自己的自定义类并在媒体查询中使用 Bootstrap 的断点大小： .my-card-sizer { width: 100%; } @media (min-width: 768px) { .my-card-sizer { width: 75%; } }

html css twitter-bootstrap bootstrap-5

回答 1 投票 0

如何在 Bootstrap 5 中单击下拉菜单时激活第一个菜单项

Bootstrap 5 下拉菜单定义为 Bootstrap 5 下拉菜单定义为 <div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Action </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#"><u>A</u>ction</a></li> <li><a class="dropdown-item" href="#">A<u>n</u>other action</a></li> <li><a class="dropdown-item" href="#"><u>S</u>omething else here</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">S<u>e</u>parated link</a></li> </ul> </div> https://jsfiddle.net/b6or2s5e/ 如果单击“操作”按钮，第一个菜单项“操作”未激活（突出显示）：需要按向下箭头才能激活它：如何修复它，以便打开下拉菜单突出显示第一项，就像普通 Windows 桌面应用程序菜单中一样？您只需在引导程序中添加内置的 active 类，它就会为您提供蓝色背景。只需获取下拉菜单中的第一个链接并将 active 添加到其 classList 即可。使用 Boot Strap 时有一些注意事项。超越 BS 课程通常具有挑战性。将 a 标签类设置为 dropdown-item 时，背景默认设置为“透明”，这不能用类覆盖，除非您的类来自具有相同名称并位于 BS CSS 下的 css 样式表CDN。但是内联样式会覆盖背景。此外，如果您希望下拉菜单项具有悬停效果，您可以使用 JS eventListeners 来设置内联样式，就像我对代码片段中的代码所做的那样。如果您只想要第一个项目集 - document.addEventListener("DOMContentLoaded", function() { // using built in active class from bootstrap // use querySelector() to get first occurance of an element const sections = document.querySelector('li a'); // get first element of the nodelist and add active class to classList sections.classList.add('active'); // using inline style to override BS dorpdow-item class const dropdown2 = document.querySelectorAll('.dropdown-menu')[1]; const sections2 = dropdown2.querySelector('li a'); sections2.style.backgroundColor = 'rgb(225,225,255)'; }); /* added to remove any mouseover events from firing on hover of underlined element */ u { pointer-events: none; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <div class="d-flex justify-content-around">  <div class="btn-group">  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Action </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#section1"><u>A</u>ction</a></li> <li><a class="dropdown-item" href="#section2">A<u>n</u>other action</a></li> <li><a class="dropdown-item" href="#section3"><u>W</u>e have a link</a></li> <li><a class="dropdown-item" href="#section4"><u>S</u>omething else here</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#section5">S<u>e</u>parated link</a></li> </ul> </div>  <div id="vertical-space"> </div> <br><br>  <div class="btn-group">  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Action </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#section1"><u>A</u>ction</a></li> <li><a class="dropdown-item" href="#section2">A<u>n</u>other action</a></li> <li><a class="dropdown-item" href="#section3"><u>W</u>e have a link</a></li> <li><a class="dropdown-item" href="#section4"><u>S</u>omething else here</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#section5">S<u>e</u>parated link</a></li> </ul> </div>  <div id="vertical-space"> </div> </div> 如果您想在其他链接上鼠标悬停（悬停）- document.addEventListener("DOMContentLoaded", function() { const dropdownMenu = document.querySelector('.dropdown-menu'); const action = document.querySelector('.btn'); const sections = dropdownMenu.querySelectorAll('li a'); // get first element of the nodelist and set to active sections[0].classList.add('active'); // override the bootstrap dropdown-item classes background // which is set to transparent by default // while built in class `active` is present // using a method with mouseover/mouseout events const highlight = (e) => { // conditional event type is mouseover and target is not the active class if(e.type === 'mouseover' && !e.target.classList.contains('active')){ // override the bootstrap transparent background // using inline styles for hovered links e.target.style.backgroundColor = 'rgb(225, 225, 225)'; // else if conditional for mouseout and target is not the active class }else if(e.type === 'mouseout' && !e.target.classList.contains('active')){ // reset the bootstrap transparent background using inline styles e.target.style.backgroundColor = 'transparent'; } } // loop over the dropdown links and add eventListsners calling highlight method sections.forEach(sec => { sec.addEventListener('mouseover', highlight); sec.addEventListener('mouseout', highlight); }) }); /* added to remove any mouseover events from firing on hover of underlined element */ u { pointer-events: none; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>  <div class="btn-group">  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Action </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#section1"><u>A</u>ction</a></li> <li><a class="dropdown-item" href="#section2">A<u>n</u>other action</a></li> <li><a class="dropdown-item" href="#section3"><u>W</u>e have a link</a></li> <li><a class="dropdown-item" href="#section4"><u>S</u>omething else here</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#section5">S<u>e</u>parated link</a></li> </ul> </div>  <div id="vertical-space"> </div> 您还可以使用内联样式为第一个项目定义自己的样式 - document.addEventListener("DOMContentLoaded", function() { const dropdownMenu = document.querySelector('.dropdown-menu'); const action = document.querySelector('.btn'); const sections = dropdownMenu.querySelectorAll('li a'); // get first element of the nodelist and background-color sections[0].style.backgroundColor = 'rgb(190, 190, 190)'; // override the bootstrap dropdown-item classes background // which is set to transparent by default // while built in class `active` is present // using a method with mouseover/mouseout events const highlight = (e) => { // conditional event type is mouseover and target is not the first item if(e.type === 'mouseover' && e.target !== sections[0]){ // override the bootstrap transparent background // using inline styles for hovered links e.target.style.backgroundColor = 'rgb(225, 225, 225)'; // else if conditional for mouseout andtarget is not the first item }else if(e.type === 'mouseout' && e.target !== sections[0]){ // reset the bootstrap transparent background using inline styles e.target.style.backgroundColor = 'transparent'; } } // loop over the dropdown links and add eventListsners calling highlight method sections.forEach(sec => { sec.addEventListener('mouseover', highlight); sec.addEventListener('mouseout', highlight); }) }); /* added to remove any mouseover events from firing on hover of underlined element */ u { pointer-events: none; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>  <div class="btn-group">  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Action </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#section1"><u>A</u>ction</a></li> <li><a class="dropdown-item" href="#section2">A<u>n</u>other action</a></li> <li><a class="dropdown-item" href="#section3"><u>W</u>e have a link</a></li> <li><a class="dropdown-item" href="#section4"><u>S</u>omething else here</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#section5">S<u>e</u>parated link</a></li> </ul> </div>  <div id="vertical-space"> </div>

javascript html twitter-bootstrap drop-down-menu bootstrap-5

回答 1 投票 0

如何动态调整导航选项卡的宽度以使其填满屏幕

我有一个导航选项卡，如下所示：我正在使用省略号，但我不喜欢我的导航分散在第二行。我不想使用 nav-justfied 而是能够挤压我的所以... 我有一个导航选项卡，如下所示：我正在使用省略号，但我不喜欢我的导航分散在第二行。我不想使用 nav-justfied，而是能够挤压我的，以便它适合屏幕，并且用户不必水平滚动。像下面这样到目前为止我的代码 .nav-tabs>li:not(.active)>a { background-color: white; border: 1px solid #ddd; border-bottom: none; border-top: 3px solid #9d9d9d; text-overflow: ellipsis; max-width: 10em; overflow: hidden; display: block; } .nav-tabs { padding-left: 15px; padding-right: 15px; padding-top: 15px; white-space: nowrap; } <ul class="nav nav-tabs"> <div class="btn-toolbar pull-right"> {% block tab_buttons %} {% endblock %} </div> <li role="presentation" class="{% if '/hosts' in request.path %}active {% endif %}inverse"><a href="{% url 'sc:events:hosts-list' event.id %}" role="tab">Hosts</a></li> {% for tab in event.benchmarks.all %} <li role="presentation" class="{% if 'summary' in request.path and tab == benchmark %}active {% endif %}inverse"><a href="{% url 'sc:events:benchmarks-summary' event.id tab.id %}" role="tab">{{ tab.name }}</a></li> {% endfor %} </ul> 我不是 100% 确定你在问什么，但听起来你可以从使用中受益：在导航栏上显示 flex。如果您在同一页面上加载内容（如管理面板），我强烈推荐Jquery Tabs。在选项卡上使用 Display:inline-flex; css 属性。

html css twitter-bootstrap twitter-bootstrap-3 tabs

回答 2 投票 0

在 TypeScript 简单 Web 应用程序中使用 bootstrap Modal

我想在我的 TS 应用程序中使用 bootstrap Modal 组件。所以，我安装了类型 npm 我@types/bootstrap 然后在我的 TS 代码中从“bootstrap”导入{Modal}； const myModal = 新 Mod...

typescript twitter-bootstrap bootstrap-5

回答 1 投票 0

Vue 3 with Sass 中的弃用警告：样式未正确应用

我正在开发一个 Vue 3 项目，最近在终端中遇到以下弃用警告：弃用警告：Sass 对于出现在嵌套规则之后的声明的行为将是

node.js vue.js twitter-bootstrap npm saas

回答 1 投票 0

如何使用引导行和列增加文本区域的高度

我设计了一个表单，其中连续有两个项目，如下所示：我的输出我使用的代码：我设计了一个表单，其中连续有两个项目，如下所示：我的输出我使用的代码： <div class="row"> <div class="col-sm-3">  <fieldset class="form-group"> <label id="fieldTitle">Equipment Length</label> <select id="selectOption" class="form-control" required data-error="Please select Equipment Length"></select> <div class="help-block with-errors"></div> </fieldset> </div> <div class="col-sm-9">  <fieldset class="form-group"> <label id="fieldTitle">Customer Notes</label> <textarea class="form-control" placeholder="Please write customer notes" ng-model="myTextarea" required data-error="Please enter customer notes"></textarea> <div class="help-block with-errors"> {{myTextarea}} </div> </fieldset> </div> </div> 所以，请指导我如何增加文本区域的高度，就像我的所需输出请告诉我该怎么做。谢谢使用 Bootstrap 4，您需要拥有属性行并添加“height: 100%;”这样高度就会拉伸到指定的行数。 “行”沿不起作用。 <textarea rows="10" style="height:100%;"></textarea> textarea { width: 300px; height: 150px; } 根据需要进行调整。在 HTML 集中 <textarea rows="10"></textarea> 在 CSS 集中 textarea { height: 100px; } 希望有帮助。类 form-control 删除 textarea rows 属性，只需将其替换为 col-md-12 <textarea class="col-md-12" placeholder="Please write customer notes" ng-model="myTextarea" required data-error="Please enter customer notes"></textarea> 使用 Bootstrap 4，您需要添加 h-25 类 <textarea class="form-control h-25" rows="5" placeholder="Please write customer notes"></textarea> 不太喜欢全局更改 textarea css attr。宁愿使用特定的 css 类，但它可能会被其他一些类覆盖，因此您可以使用 !important，尽管这不是最佳实践。 {{ form_widget(form.myTextarea,{'attr': {'class': 'specific-textarea'}}) }} 并添加到你的CSS中 .specific-textarea { height: 200px !important; } 在 Bootstrap 5 中，只需添加属性 rows 和类 h-100，如下所示： <textarea class="form-control h-100" rows="6"></textarea>

html css twitter-bootstrap

回答 7 投票 0

twitter-bootstrap 相关问题

最新问题