Bootstrap 4更改断点
我有一个应用程序，设计要求从台式机到平板电脑，或者分别从xl到lg，都需要1280个断点。但是，Bootstrap本身的xl断点为1200。我需要全局更改该xl断点以进行引导。我是否必须从源文件重新编译Bootstrap 4？我尝试在我的Sass构建中设置它：$grid-breakpoints: ( // Extra small screen / phone xs: 0, // Small screen / phone...
2024-01-10Bootstrap 4文件输入
我正在使用bootstrap 4文件浏览器。如果我使用自定义文件控件，则会一直看到“选择文件值”。选择文件后，我想更改选择文件的值。此值实际上隐藏在CSS中.custom-file-control:lang(en)::after，我不知道如何在javascript中访问和更改它。我可以这样获得所选文件的值：document.getElementById("exampleInputFile").value.split...
2024-01-10Bootstrap 4-卡列中的响应卡
我玩引导4，虽然在我无法找到一个解决方案，以附加响应能力卡div用class="card-columns"（本类应用砌体，就像这个类的DIV中影响到卡）。在引导3是 容易 的款式，让“卡”响应，因为它是可以应用类似class="col-md-3 col-sm-6 col-xs-12"包含一个divthumbnail，caption等等。在Bootstrap 4中使用卡时如何产生相同的效果...
2024-01-10Bootstrap 3-禁用导航栏折叠
这是我简单的导航栏：<div class="navbar navbar-fixed-top myfont" role="navigation"> <div class=""> <ul class="nav navbar-nav navbar-left"> <li> <a class="navbar-brand" href="#"> <img src="assets/img/logo.png"/> ...
2024-01-10Bootstrap 4传送带空间到右边
我有一个Bootstrap 4传送带空间到右边的问题，它与页面没有很好的对齐。示例在这里：http://jsbin.com/wakuyiqebu它在移动设备上更加引人注目。Bootstrap 4传送带空间到右边<div class="col-12 col-sm-12 col-md-12 col-lg-5 bg-dark"> </div> <div class="col-12 col-sm-12 col-md-12 col-lg-7 padding-off"> <div id="carouselEx...
2024-01-10无法在Bootstrap 4中进行验证
我正在尝试通过Bootstrap激活验证，并且已粘贴到页面上的follownig示例中。<div class="form-group has-success"> <label class="form-control-label" for="inputSuccess1">Input with success</label> <input type="text" class="form-control form-control-success" id="inputSuccess1"> <div class...
2024-01-10Bootstrap 4下拉菜单不起作用？
我复制了下拉菜单的官方Bootstrap 4示例，但它不起作用，没有任何内容被下拉。<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu" aria-label...
2024-01-10如何更改Bootstrap版本4按钮颜色
我可以通过更改bootstrapv4中的主题颜色来更改主按钮的颜色。但这也会影响所有其他组件。如何设置主按钮颜色而不影响主题颜色？我不想设置主要品牌并实现这一目标。还有其他选择吗？回答：现在，Bootstrap 4使用了SASS，您可以使用mixins 轻松地 button-variant。由于您只想更改主按钮的颜色，而不是...
2024-01-10Bootstrap 4中心垂直和水平对齐
我有一个页面，其中仅存在表单，并且我希望将表单放置在屏幕的中央。<div class="container"> <div class="row justify-content-center align-items-center"> <form> <div class="form-group"> <label for="formGroupExampleInput">Example label</label> <input type="text" class="fo...
2024-01-10带悬停的Bootstrap下拉菜单
好的，所以我需要的很简单。我已经在导航栏中设置了一些下拉菜单（使用class="dropdown-toggle" data-toggle="dropdown"），并且工作正常。问题是它可以工作“ onClick”，而我希望它可以工作“ onHover”。有内置的方法吗？回答：最简单的解决方案是使用CSS。添加类似….dropdown:hover .dropdown-menu { display: bloc...
2024-01-10如何自定义Bootstrap列宽？
我有这个，但是我觉得4对于我的侧边栏宽度来说太大了，而3太小了（它总共要加12）。 <div class="col-md-8"> <div class="col-md-4">我试过了，但是没有用： <div class="col-md-8.5"> <div class="col-md-3.5">还有另一种方法可以得到类似的结果吗？谢谢你的帮助！回答：为了扩展@isherwood的答案，这是-sm-在Bootstrap ...
2024-01-10在Bootstrap 4导航栏中将元素居中
无论我尝试什么，我都无法在Bootstrap导航栏中放置任何内容，对此有什么解决方案？我试过使用margin:0 auto;或margin-right:auto; margin-left:auto;使用的center-block类添加div 。什么都行不通，为什么要实现如此简单，我无法理解的东西这么难，我在做什么错呢？这是当前代码：<nav class="navbar navbar-fixed-top navbar-da...
2024-01-10更改Bootstrap弹出窗口的宽度
我正在使用Bootstrap 3设计页面。我试图placement:right在输入元素上使用带有popover的页面。新的Bootstrap可确保您在使用form-control时基本上具有全角输入元素。HTML代码如下所示：<div class="row"> <div class="col-md-6"> <label for="name">Name:</label> <input id="name" class="form-control" type="text" ...
2024-01-10Bootstrap 4：导航内的多级下拉菜单
在Bootstrap 4中进行多级下拉的最简单方法是什么？我设法在SO上找到的所有示例过于混乱，或者没有包含在导航中。我试过只是将一个下拉列表放到一个下拉列表中，但这似乎不起作用。有人可以帮我吗？这是我的代码的基本轮廓：<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/boot...
2024-01-10Bootstrap 4：隐藏的可见Cols？
我想知道为什么以下内容不起作用-xs隐藏在xs视图中。我觉得这与Bootstrapv4中引入的更改有关，但是我想知道与在CSS中相比，在此代码中仍然可以实现这一点吗？我正在使用默认的bootstrap.css文件。<div class="container"> <div class="row"> <div class="hidden-xs col-lg-4 col-md-6 col-sm-12 col-xs-12"> Some text here. </div...
2024-01-10更改Bootstrap输入焦点蓝色发光
有谁知道如何更改Bootstrap的input:focus？单击input字段时出现的蓝色发光？回答：最后，我在bootstrap.css中更改了以下css条目textarea:focus,input[type="text"]:focus,input[type="password"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="date"]:focus,input[type="month"...
2024-01-10如何将Bootstrap-4更新为Angular-js
我创建Bootstrap-4项目（网站），但是现在我想更新Angular-js的这个项目，我想知道如何使用bootstrap标签来改变角度，？如何将Bootstrap-4更新为Angular-js回答：我还不确定你的问题到底是什么。但是，如果你想要一个角度和自举的适当集成，你可以使用角引导指令，看看这个指令UI Bootstrap...
2024-01-10如何使Bootstrap 4列都具有相同的高度？
我想要一个在Bootstrap 4支持的所有浏览器中都可以使用的解决方案。如果不涉及JS，则更好。现有的一些解决方案基于Bootstrap3，有些则无法在MacOS的Safari中使用。 似乎我做错了研究。默认情况下，Bootstrap4的高度相同。我随附了带有插图的更新图像。您无需执行任何操作，它已经存在。回答：你只需要...
2024-01-10在ngx-bootstrap的日期选择器上分开输入和日历
我想在ngx-bootstrap的日期选择器上分开输入和日历。 然后，我想将日期选择器的主体插入到特定的标记中。在ngx-bootstrap的日期选择器上分开输入和日历所以这是我写的代码，请把你的时间来阅读它date.component.tsimport { Component, OnInit, OnDestroy, ViewChild, ComponentFactoryResolver, ViewContainerRef, Injector } from '@ang...
2024-01-10Bootstrap 4导航栏和内容填充高度flexbox
我必须创建一个布局，其中内容网格必须位于剩余的整个页面上，但是该布局还具有导航栏。为此，我决定将导航栏放置在flex容器中，并将内容放置在高度为100％的行中。我需要内容来填充剩余的剩余空间。菜单是动态的，所以我不知道导航栏的高度。但是，在较小的屏幕上，导航栏无法正确调整大...
2024-01-10在Bootstrap 4中垂直堆叠的列之间增加间距
不幸的是，似乎没有一种好方法来管理在某些断点处从水平堆栈过渡到垂直堆栈的列之间的垂直间距。涉及表单时似乎确实有解决方案，但这不是这里的情况。我已经尝试过此解决方案，但是当有多个列排成一行时，它不起作用。为了说明我的情况，这是HTML的结构：<body> <div class="container"> <div cl...
2024-01-10如何在单击时隐藏可折叠的Bootstrap 4导航栏
我使用Bootstrap 4很好地创建了这个可折叠的导航栏，但是我希望当用户单击链接时将其关闭。有什么办法吗？谢谢html导航栏：<nav class="navbar navbar-toggleable-md fixed-top"><button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded...
2024-01-10如何在Bootstrap v4中实现导航栏下拉悬浮？
我对新的引导程序版本有些困惑，因为它们将下拉菜单更改为div：<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria...
2024-01-10Bootstrap中CSS过渡中的“强制回流”
从Twitter的bootstrap修改bootstrap-modal jquery插件，我看到他们使用CSS过渡来实现渐变效果。这行令我着迷的是这一行：that.$element[0].offsetWidth // force reflow如果该行被注释，过渡将不起作用。我发现有关其含义的所有参考文献都是“强制回流”注释。读取该属性如何影响CSS过渡？这是为了解决浏览器中的错...
2024-01-10在Bootstrap 4中创建响应式导航栏边栏“抽屉”吗？
我在网上看到了一些使用其他版本的引导程序的示例，但是它们都改变了CSS太多，这使得学习引导程序更加困难。我想知道在Bootstrap 4中是否可以使用折叠，叠丸，flexbox之类的工具来完成此任务？我的Jsfiddle缺少什么：反应不正确导航栏在粘性类中无法正确滚动即使我设置了课程，菜单按钮也不是...
2024-01-10
