Bootstrap 4是流行的前端组件库的第四个主要版本。 Bootstrap框架有助于创建响应迅速，移动优先的网站和Web应用程序。
带有 Bootstrap 主题的 Select2 不支持输入组类
我尝试将 select2 与输入组一起使用，但按钮始终位于 select2 控件之后的下一行。 如果删除 select2 类，它会按预期工作。 为什么选择2
CSS 按钮在 Mozilla Firefox 中无法内嵌显示
我的搜索按钮在 Mozilla Firefox 中显得不合适，我不知道为什么会这样。 我正在将 Bootstrap 4 与 Angular 2 结合使用 这是它在 Chrome 上的样子 这就是它
Bootstrap 行的边距（左侧和右侧）为 -15px。 据我了解，这主要有两个原因： .container 的内边距（左和右）为 15px col-* 的间距为 15px。 所以...
我正在尝试将我的导航栏项目与 Bootstrap 4 alpha 6 中的右侧对齐。 我希望一切都正确对齐，除了品牌/标题之外。 这就是我的代码的样子： 我正在尝试将我的导航栏项目在 Bootstrap 4 alpha 6 中向右对齐。 我希望所有内容都正确对齐，除了品牌/标题之外。 这就是我的代码的样子： <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Oliver</a> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">About <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#projects">Projects</a> <a class="nav-item nav-link" href="#contact">Contact</a> </div> </div> </nav> 您可以将 .justify-content-end 添加到 .navbar-collapse 元素。我假设您还想将移动切换菜单项移至右侧。为此，请将 .align-items-end 添加到 .navbar-nav <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Oliver</a> <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup"> <div class="navbar-nav align-items-end"> <a class="nav-item nav-link active" href="#">About <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#projects">Projects</a> <a class="nav-item nav-link" href="#contact">Contact</a> </div> </div> </nav>
我想让我的背景图像在移动设备上响应。当我更改 css 代码中的某些属性时，会出现各种问题。要么图像变得响应，但它引入了白色......
我正在尝试将图像、标题、按钮放置在另一个图像之上。问题是，在小屏幕尺寸上，小图像不会调整大小，并且超出了保持图像背景。
Bootstrap 4：如何使下拉链接的头部在导航栏中可点击
我正在使用 Bootstrap 4，并且有一个带有下拉链接的菜单项。 除了可以使用下拉菜单来选择某些内容之外，我还想让菜单项的文本成为可点击的链接...
我正在使用 bootstrap 4 Alerts 来显示错误消息等，例如他们的演示： ... 我正在使用 bootstrap 4 Alerts 来显示错误消息等，例如他们的演示： <div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> You should check in on some of those fields below. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> 我还使用 AJAX 调用来执行表单 POST。 我遇到的问题是，如果用户发帖，则会显示错误消息，但是如果用户单击关闭按钮并重新发帖，如果发生错误，因为他之前关闭了上一个错误，我无法取消隐藏带有 d-block 的警报容器，因为它根本不再存在于 DOM / Page 中。 DIV 元素被破坏了，或者至少，我在 Chrome 的开发者工具中看不到它。 我怎样才能解决这个问题，以便我的关闭按钮只是“隐藏”容器，而不是销毁它或它所做的任何事情？即使用户关闭后我也需要能够重新显示它。 干杯！帕特 最终用 data-dismiss="alert" 类型的解决方案替换 onClick="$('#idOfDiv').addClass('d-none');"... 为您的帮助干杯！帕特 您尝试过使用一些 jQuery 或 Javascript 吗？ 也许在右上角添加一些“箭头”图标。 然后，将您的警报分为两部分：一部分是永久保留的细条，另一部分在单击时“切换” 将 data-dismiss="alert" 替换为 onclick="$(this).closest('.alert').hide()"： <div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> You should check in on some of those fields below. <button type="button" class="close" onclick="$(this).closest('.alert').hide();" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div>
作为这些页面修改的一部分，我修改了菜单的行为，即单击某个项目时菜单会在移动设备上折叠。它的工作几乎完美无缺，除了一个......
我一直在阅读有关 fieldset 标签的内容，但我必须说我不太了解它的预期用途。它应该用于对表单控件进行分组，但是有什么用呢？有没有经过什么特殊处理...
我有以下 html，它显示了我想要的内容，但不是我想要的位置;-)。 我希望“文件”下拉列表位于左侧，其余下拉列表位于右侧。 我已将我的 css 文件包含为...
我有一个使用 Bootstrap 创建的简单菜单。左边是文字，右边是视频。我想实现视频延伸到页面顶部，并带有
我在 Bootstrap 模板中排列了两个（实际上是几个）按钮。当按下按钮时，其下方会打开折叠。我已经在第一个中展示了所需的行为...
我试图使粘性导航栏进入渐变状态，然后在固定位置变回黑色，但是当它移动时，它应该平滑地合并到渐变中。 当我使用导航栏滚动时...
我正在尝试在我的角度安装中使用 bootstrap 4。我跑了 npm install --save bootstrap@next 但我在运行时有一个中断： ./node_modules/css-loader?{"sourceMap":false,"importLoaders":...
我在我们的管理网站上使用 Bootstrap Modals 来实现多种功能。 这些页面受我们的管理员登录保护，因此如果有人获得 URL，他们就无法执行代码等。非常标准。 我...
下拉菜单的 dropright 变体在 ng-bootstrap 中不起作用
我正在尝试将 dropright 变体集成到引导下拉列表中。我可以在引导文档中看到它 https://getbootstrap.com/docs/4.3/components/dropdowns/#dropright 他们已经给出了代码 &...
我正在尝试构建一个响应式仪表板，使用侧边栏在右侧进行导航，我将侧边栏构建为布局，并通过使用
我正在尝试将一个简单的图像排成一行，并将其放置在页面的右侧。 如果我想用文本来做到这一点，我会简单地这样做： 我正在尝试将一个简单的图像排成一行，并将其放置在页面的右侧。 如果我想用文本来做到这一点，我会简单地这样做： <div clas="row"> <div class="col text-right"> <h1>Im on the right</h1> </div> </div> 好像没有对应的image-right。有 float-right，但这会将下面的文本拉到上方，这不是我们想要的。 尝试过这个，但没有效果： <div class="row"> <div class="col"> <img src="images/MyLogo.png" class="pull-right" style="height: 200px" alt="our Logo"> </div> </div> 作为一名老派 html 表用户，我认为我可以在左侧创建虚拟空列，尽管这不是我们想要的，因为当屏幕变小时，列会“中断”： <div class="row"> <div class="col-xs-10"> <div> <div class="col-xs-2"> <img src="images/MyLogo.png" style="height: 200px" alt="our Logo"> </div> </div> </div> 但这也会使图像牢牢地粘在左侧。 有什么建议如何将图像放在页面的右侧，并保持左侧的空间为空白吗？ 这里不太清楚你的目标是什么（添加更多细节或提供准确的 html 代码可能会澄清问题），但如果我理解正确的话，你需要一个图像来获取整行并向右浮动，并在右边留出空间图像的左侧应该是空的。如果是这种情况，这应该适合你： <div class="row"> <div class="col"> <img src="images/MyLogo.png" class="pull-right" style="height: 200px" alt="our Logo"> </div> </div> .col { text-align: right; } .pull-right { margin: 0 0 0 auto; } 您可以使用 Flex 实用程序d-flex justify-content-end: <div class="row"> <div class="col d-flex justify-content-end"> <img src="" alt=""> </div> </div> 参考 Bootstrap DOCS 您可以使用rounded float-right代替pull-right： <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <div class="row"> <div class="col"> <img src="https://dummyimage.com/150x100/000/fff" class="float-right" alt="our Logo"> </div> </div>
当我缩小到移动显示时，如何使两个重叠的弹性盒项目并排在一行中以具有响应式显示？
我正在编写一个小的 HTML CSS 代码，用于在一行中并排显示两个重叠的内容（图片）。当我将宽度缩小到移动显示时，我的目标是将它们一个一个地显示......