twitter-bootstrap 相关问题

React Bootstrap 表单验证 - isInvalid 不设置表单无效

我一个表单上有两个文本框，如下： { /* 密码 */} 密码... 我的表单上有两个文本框，如下： <div className="row"> <div className="col-md-6"> { /* Password */} <Form.Group> <label>Password</label> <Form.Control required type="password" isInvalid={formErrors && formErrors.password} onChange={(e) => setField("password", e.target.value)} value={form.password ?? ""} /> <Form.Control.Feedback className="text-danger" type="invalid"> {formErrors.password} </Form.Control.Feedback> </Form.Group> </div> <div className="col-md-6"> { /* Confirm Password */} <Form.Group> <label>Confirm Password</label> <Form.Control required type="password" isInvalid={formErrors && formErrors.confirmPassword} onChange={(e) => setField("confirmPassword", e.target.value)} value={form.confirmPassword ?? ""} /> <Form.Control.Feedback className="text-danger" type="invalid"> {formErrors.confirmPassword} </Form.Control.Feedback> </Form.Group> </div> 在提交表单时，我会进行以下验证： setFormErrors({ password: form.password == undefined || form.password == "" ? "Password is required" : "", confirmPassword: form.confirmPassword == undefined || form.confirmPassword == "" ? "Please confirm the password" : form.password != form.confirmPassword ? "Passwords do not match" : "", }); if (event.currentTarget.checkValidity()) { console.log("Submitting...", form) } 如果文本框留空，那么它工作正常，两者都突出显示为红色并且表单不会提交。但是，如果您输入不匹配的密码，该字段会正确突出显示红色，指示错误，但表单仍会提交。 当页面上有标记为无效的控件时，为什么 checkValidity() 会失败？ 我强烈建议您依赖库，而不是手动制定表单验证，例如是的。 查看官方 React Bootstrap 文档，您会找到验证表单的好例子。还有 有很多很棒的文档，比如这篇文章 ，祝你好运！

Bootstrap 3 Glyphicons CDN

注意！ 在此拉取请求合并后，Bootstrap 图标又回来了。 经过过去几周的反复思考，我决定恢复 Glyphicons 图标......

Bootstrap 中的占位符颜色更改

如何更改 Bootstrap 中的占位符颜色？ 我尝试过以下代码，但不起作用。 输入::-webkit-输入-占位符{ 颜色: 红色; } 输入：-moz-占位符{ 合作...

如何根据引导类的屏幕尺寸启用 <div class="row"> 的 ng-click 操作？

我在我的应用程序中使用 angularJs 和 twitter Bootstrap。 ... 我在我的应用程序中使用 angularJs 和 twitter Bootstrap。 <div class="row"> <div class="col-xs-12"> <div class="row yo-bold"> <div class="col-xs-6 col-sm-5"> {{ "KEY" | translate | capitalize}} </div> <div class="col-xs-6 col-sm-5"> {{ "LABELS" | translate | capitalize}} </div> <div class="hidden-xs col-sm-2"> {{ "ACTIONS" | translate | capitalize}} </div> </div> <hr /> <div class="row yo-mb5 yo-div-table" ng-repeat="l in langs | filter:searchText | orderBy: '_id' track by $index" ng-class="$index % 2 == 0 ? 'yo-bg-grey' : ''"> <div class="col-xs-6 col-sm-5"> {{ l._id }} </div> <div class="col-xs-6 col-sm-5"> <div class="row" ng-repeat="lang in langsAvailable track by $index"> <div class="col-xs-12"> <flag country="{{lang | getLangCode}}" size="16"></flag>&nbsp;&nbsp;{{ l[lang] }} </div> </div> </div> <div class="hidden-xs col-sm-2"> <button class="btn btn-xs btn-warning" ng-click="openLangModal(l)"><i class="fa fa-pencil"></i></button> <button class="btn btn-xs btn-danger" ng-click="removeLabel(l._id)"><i class="fa fa-trash"></i></button> </div> </div> </div> </div> 在 > 768px 版本 (col-sm-*) 中，它看起来像这样： 在 < 768px version (col-xs-*) it looks like this: 在版本中<768px I removed the column of actions and I would insert a ng-click on the entire row, open a modal and choose the desired action within the modal. Is possible? 我知道我可以通过为不同的屏幕尺寸创建两个不同的 div class="row" 来做到这一点，第一个为隐藏的 xs，第二个为可见的 xs，但我想知道是否有更好的方法。有什么想法吗？ 更干净、更理想的方法是在 <768px device width. Which can be done using $(window).width() 中通过 jquery 添加自定义属性（ng-click）。 我们只是根据屏幕宽度添加或删除该属性。 if ( $(window).width() < 768) { //code goes here } 如何做： 既然你已经使用了 Bootstrap，我显然假设下面的 Actions 列 <768px screen width would vanish. 1) 将一个类应用于主父行，例如 <div class="row yo-row">。 2）我们将使用此类来识别行并向行插入 ng-click 属性。 if ( $(window).width() < 768) { $('.yo-row').attr("ng-click", "openModal()"); } 3）现在剩下的就是添加模态 div 以打开模态。简单:-) 注意：显然，由于是 JavaScript 而不是 CSS 发挥了作用，因此您需要再次运行脚本才能看到更改。因此，您需要转到任何特定的窗口大小并重新加载它才能显示该属性。如果您尝试将浏览器窗口的大小从桌面调整为小屏幕并期望它应用该属性，则此操作将不起作用。 您可以将单击事件处理程序附加到检查图标可见性的行。如果图标可见，则不执行任何操作。如果它们被隐藏，请使用控件显示您的模式。 最简单的方法是创建两个不同的 <div> 并使用 ng-if 指令有条件地显示所需的一个。 您可以在 Angular 中解析屏幕宽度，为什么： $window.innerWidth

禁用引导选项卡点击

我正在使用 bootsrap 选项卡作为注册表单， 我使用下一个和上一个按钮的 onclick 事件更改了选项卡的导航。 但选项卡单击仍然有效并且能够到达所需的位置...

更改列宽引导表

我有一个正在使用 Bootstrap 的静态 PHP 网站。这些表由 Bootstrap 控制。 我注意到我似乎无法控制 TD 部分的长度，因此我可以防止...

Bootstrap 与 Struts 2 兼容吗？

我正在使用 Bootstrap 进行 UI 开发。当我在其中使用 Struts 2 标签作为 时，完整的页面对齐被破坏了。当我用普通替换 s: (Struts 2 标签) 标签时...

如何禁用浏览器功能和快捷键进行全屏在线考试？

我是 OES（在线考试系统）的新手。我想在安全的环境下进行在线考试，用户将无法作弊 请帮忙做这件事。 我正在使用带有 Codeigniter 框架的 PHP...

Bootstrap：`span`/`row`内的`well`超出了它的容器：如何让它“仅”填充宽度=100%的内容？

我有一个 Bootstrap 的问题，远远超出了它的包含元素（这里是一个 class="row" ，它本身在一个 class="span4" 中）。 它在我在这里所做的 JSFidle 中清晰可见：http://jsfiddle.net/

从 Bootstrap 网站折叠不起作用

我正在尝试学习使用 bootstrap 进行折叠，我直接从网站复制了代码，但是当我将其粘贴到我自己的 html 文件中时它不起作用。有人可以帮我解决这个问题吗？ ...

Bootstrap 5x 仅在移动设备上折叠

我尝试仅在移动设备上使用 Bootstrap 5x 中的默认折叠功能。即使我已经设置了 CSS 媒体查询（经研究），.collapse 仍被忽略？ 崩溃了...

如何在 Twitter bootstrap sass 中创建列（alpha 4）

我正在尝试使用 Bootstrap 提供的 make-col() Sass mixin。 http://v4-alpha.getbootstrap.com/layout/grid/。我想做的是创建两列。通过编译的类，我能够做到：...

引导按钮全宽，适合较小的屏幕尺寸

我希望我的引导按钮在较小的屏幕上占据全屏宽度（好吧，几乎）。 btn-block 确实使按钮延伸，但适用于所有类型的屏幕。 这个 btn-block 可以使用自定义吗...

引导模式错误：“未捕获的类型错误：非法调用”

我正在尝试动态渲染此 Bootstrap 模式的内容，但我不断收到此调用错误。我开始怀疑 Bootstrap 无法渲染具有模板的 modalBody

如何在 Rails 7.0 中使用 bootstrap-icons？

我想在 Rails 7.0 应用程序中使用 bootstrap-icons，但图标已折叠。 它应该显示“加号”图标（该图像位于我的旧应用程序中）。 我还收到 ActionController::RoutingErro...

如何在 Bootstrap 5 中使用 CSS 变量？

我一直在玩 Bootstrap 的全新 5.0.1。 在官方文档中，他们说他们在编译的 CSS 中使用 CSS 变量。 在我看来，我可以覆盖某些co...

如何覆盖 Bootstrap 变量 --bs-heading-color

在wordpress中使用名为BScore的Bootstrap主题和由scss编译的css我有一个名为的文件： _bscore_variables.scss 允许我覆盖引导主题变量。 例如，我认为...

使用 Bootstrap（使用 Firefox 浏览器）时，选择控件在表单上缺少箭头图标

我在使用 Bootstrap（使用 Firefox 浏览器）的表单上有一个选择控件，但它缺少右侧的箭头图标： 这是我使用的相关 HTML： ... 我在使用 Bootstrap（使用 Firefox 浏览器）的表单上有一个选择控件，但它缺少右侧的箭头图标： 这是我使用的相关HTML： <div class="container-fluid"> <form id="form" method="post" action="process.php"> <div class="form-group"> <label class="lbl" for="choose">Choose</label> <select class="form-control" id="choose" name="choose" required> <option value="Foo">Foo</option> <option value="Bar">Bar</option> </select> </div> <input type="submit" name="button" value="Submit" class="btn-primary"> <input type="button" name="cancel" value="Cancel" class="btn-primary" onclick="clkcnc();"> </form> </div> 这是我在这些元素上使用的唯一 CSS： body { font-size: 20px; } .form-control { padding-top: 6px; } .lbl { padding-top: 6px; } 在我的表单上使用 Bootstrap 时，我想使用 form-control 类使控件看起来像其他控件，但这个选择控件看起来更像是文本输入。 更新 此问题与使用不同的分辨率有关（通过 Firefox 中的响应式设计模式）。 在我的例子中，分辨率为 480 x 854。当我关闭该模式时，浏览器将在 1600 x 900 的屏幕分辨率内显示，选择控件将正常显示，右侧有箭头图标。 不幸的是，我需要页面以窄分辨率工作。 以下是我的基本页面设置中的元设置： <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 这是下面 link2pk 的小提琴结果： 升级至 Bootstrap v5.2 + 如果使用 Bootstrap v5，请尝试 form-select 而不是 form-control（请参阅：https://getbootstrap.com/docs/5.0/forms/select/） 改变 到 将表单控件更改为表单选择选择

使用overflow-x-auto（引导程序）围绕表格进行划分，但整个页面变得可滚动

我正在使用 Blazor，其中我有一个组件来加载单独的表（带有搜索和使用排序的选项）。我的桌子周围有一个带有溢出x-auto类的div，但它仍然使整个p......

Bootstrap 中的偏移列

这就是我想做的事情的想法： 这就是我想做的事情的想法： <div class="container-fluid"> <div class="row"> <div class="col-sm-2"></div> <div class="col-sm-4"></div> <div class="col-sm-4"></div> <div class="col-sm-2"></div> </div> </div> 使用偏移量会如何工作？ 偏移量就像一个空白列，将保留在您的列之前。例如，如果您想要一列的大小为屏幕的一半并且正好位于中间，则必须执行以下操作： <div class="col-sm-6 col-sm-offset-3"></div> 一整行有 12 列。这样您将拥有 6 列（行的一半）和 3 列的偏移量。它将正好位于屏幕中间。 查看 Bootstrap 文档。 在Bootstrap 3中，像这样.. <div class="container-fluid"> <div class="row"> <div class="col-sm-4 col-sm-offset-2"></div> <div class="col-sm-4"></div> </div> </div> http://codeply.com/go/7wofwfzrH3 在Bootstrap 4中，像这样.. <div class="container-fluid"> <div class="row"> <div class="col-sm-4 offset-sm-2"></div> <div class="col-sm-4"></div> </div> </div> https://codeply.com/go/t5DTGwero8 上述内容对我不起作用，因为我认为引导类已略有更改。 <div class="col-md-4 offset-md-2"> 对我有用。 希望这有帮助 戴夫 下面是 Bootstrap 5 的示例。 但请注意，offset用于margin-left对齐。如果您想将项目与 margin-left 对齐，可以使用 offset 类。 Bootstrap 5 中有两种类型的偏移量：第一种是从 1-12 的 offset，第二种是响应类，如 offset-sm、offset-lg、offset-md。 看起来像这样： <div class="container-fluid"> <div class="row"> <div class="col-sm-2 offset-sm-2"></div> <div class="col-sm-4 offset-sm-4"></div> </div> </div> 我正在使用 bootstrap 3。下面的代码可以让我向右移动 div。 <div class="col-lg-4 offset-lg-4"></div> 在 bootstrap 5 + 检查订单栏 <div class="col-lg-4 offset-lg-4"></div>