twitter-bootstrap-3 相关问题

Bootstrap 3是前端框架的第三代，允许更快速的Web开发，具有迷人的外观和感觉。与[twitter-bootstrap]标签一起使用

在 Bootstrap 3 上调整轮播图像大小

我想找出我在这里做错了什么。我的代码使图像尺寸仅比 iPad 横向 (col-md-*) 尺寸上的边框短。正如你所看到的，我几乎有一个完美的尺寸适合所有的...

twitter-bootstrap twitter-bootstrap-3

回答 3 投票 0

引导导航栏切换按钮不起作用

我正在使用 Bootstrap v3.0.2 开发响应式 WordPress 主题。在手机/平板电脑浏览器中，我需要显示 Bootstrap 切换按钮，而不是整个菜单。我的按钮正在显示，但是当我...

twitter-bootstrap twitter-bootstrap-3 wordpress-theming togglebutton

回答 4 投票 0

带有 Bootstrap 导航栏的 MVC - 将所选项目设置为活动

我正在学习 Bootstrap，无法使所选项目进入“活动”状态。活动状态保留在默认项目上。新选择/单击的项目会短暂变为活动状态，但是

asp.net-mvc twitter-bootstrap twitter-bootstrap-3

回答 10 投票 0

如何在anguler1，Bootstrap3中添加多选复选框下拉列表

我是angulerJS的新手，所以不知道如何添加多选复选框下拉列表。这是我的部分 html，显示多选。我希望它呈带有复选框的下拉菜单形状，如图所示...

angularjs checkbox twitter-bootstrap-3 multi-select

回答 1 投票 0

在 Bootstrap 3 中的工具提示中添加换行符

我正在使用 Bootstrap 3 并在我的 div 中添加了一个工具提示。我尝试过使用< br > 和创建新行。 Bootstrap 会阻止我吗？我正在使用 Bootstrap 3 并在我的 div 中添加了一个工具提示。我尝试过使用< br > 和创建新行。 Bootstrap 会阻止我吗？ <div class="content show-tooltip" data-placement="top" data-original-title="1st line of text <br> 2nd line of text"> 您需要将 data-html="true" 添加到标记中.. <div class="content show-tooltip" data-html="true" data-placement="top" title="1st line of text <br> 2nd line of text"> 工作演示：https://codeply.com/p/C8083WXo5Z 对于Bootstrap v5：data-bs-html="true" <div data-bs-html='true' data-bs-toggle='tooltip' data-bs-title='1st line <br> 2nd line'> 在标题中使用以下代码来换行： HTML ...title="- Item 1  - Item 2 " CSS .ui-tooltip { /* tooltip container box */ white-space: pre-line; } .ui-tooltip-content { /* tooltip content */ white-space: pre-line; }

jquery twitter-bootstrap twitter-bootstrap-3

回答 2 投票 0

引导模态弹出窗口不可点击

使用 Bootstrap 添加模式弹出窗口。单击触发按钮后，模式会变暗并且无法单击。知道是什么原因造成的或者去哪里寻找吗？使用 Bootstrap 添加模式弹出窗口。单击触发按钮后，模式会变暗并且无法单击。知道是什么原因造成的或去哪里查找吗？  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button>  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> application.js //= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require miracle/jquery.noconflict //= require miracle/modernizr.2.8.3.min //= require miracle/jquery-migrate-1.2.1.min //= require miracle/jquery-ui.1.11.2.min //= require bootstrap //= require turbolinks //= require magnific-popup/jquery.magnific-popup.min //= require miracle/jquery.stellar.min //= require miracle/waypoints.min //= require owl-carousel/owl.carousel.min //= require jquery.sky.carousel/jquery.sky.carousel-1.0.2 //= require miracle/jquery.plugins //= require miracle/main //= require_tree . 当我像这样在模态中添加 data-backdrop="false" 时，我解决了同样的问题： <div class="modal fade" id="userGoing" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false"> 有时，更改 z-index 可能会弄乱 Bootstrap，因此正如他们在 Bootstrap 文档中所说，尝试将  块放在页面顶部。如果它是一个可以从应用程序中的许多地方访问的模式，您可以将其放置在部分中并在您的 app/views/layouts/application.html.erb 之上调用它，如下所示（抱歉，这是一个很薄的模板，请告诉我您是否需要 erb 翻译）： doctype html html head == render 'layouts/meta' = stylesheet_link_tag … = javascript_include_tag … = csrf_meta_tags body == render 'path/to/your/modal' .container == yield == render 'layouts/footer' 否则，您可以尝试在 <%== yield :modal %> 中执行特殊的 application.html.erb 并从其他地方用 `<%- content_for :modal %> 调用它。不确定这里的 erb 语法。此处解释：使用 Content For 方法在同一页面添加以下代码。 #myModal{ z-index: 9999 } .modal-dialog 将 pointer-events 设置为 none。我覆盖了该属性并设置了 pointer-events: unset; 所以： .modal-dialog { pointer-events: unset !important; } 这对我有用过了很长一段时间，我就得到了这个简单的错误 .modal-backdrop { z-index: -1; } 谢谢。当我从另一个模态调用一个模态时，我遇到了同样的问题（但当我只调用第一个模态时则没有）。所以，这可能对你没有帮助，但它可以为其他人节省很多时间：我对淡入淡出效果有不同的定义，并且有与 display: inline-block 的界限。我删除了它，问题就消失了。失败的 CSS 定义： .fade { ... display: inline-block; ... } 情况：我使用 Razor 页面模态（div）被渲染为主体的最后一个元素在 _layout.cshtml 中，所有默认脚本都是在 @RenderBody 调用之后渲染的。因此，在渲染的 html 中，所有脚本标签都在那一刻渲染在正文的末尾）在渲染的 html 中，模态 (div) 在脚本之后渲染，这导致了问题。我是如何解决这个问题的：我在 @RenderBody 调用 (_layout.cshtml) 之后执行了 @RenderSection("Modal") 调用。这个 @RenderSection("Modal") 调用然后在页面上的“@section Modal{...}”内渲染 html。

javascript twitter-bootstrap twitter-bootstrap-3

回答 7 投票 0

隐藏或显示折叠从js

我编写了一些控制单元，通过使用引导程序中的“折叠”类来切换几个容器，例如带有锚点的列表，该锚点对我的隐藏容器“href”属性有特殊作用，这里是示例...

javascript jquery twitter-bootstrap-3

回答 3 投票 0

Twitter bootstrap 选择只读仍然可以更改选项

我有一个带有 readonly="true" 的引导选择，但我仍然可以更改所选选项。我需要禁用=“true”行为，但是当我使用它时，选择不会提交。我需要一个组合...

jquery css twitter-bootstrap twitter-bootstrap-3 yii2

回答 6 投票 0

在 Bootstrap 3 中的必填字段中添加星号

我的 HTML 有一个名为 .required 的类，该类被分配给必填字段。这是 HTML：我的 HTML 有一个名为 .required 的类，已分配给必填字段。这是 HTML： <form action="/accounts/register/" method="post" role="form" class="form-horizontal"> <input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' /> <div class="form-group required"> <label class="col-md-2 control-label">Username</label> <div class="col-md-4"> <input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" /> </div> </div> <div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div> <div class="form-group required"><label class="col-md-2 control-label">Password</label><div class="col-md-4"><input class="form-control" id="id_password1" name="password1" placeholder="Password" required="required" title="" type="password" /></div></div> <div class="form-group required"><label class="col-md-2 control-label">Password (again)</label><div class="col-md-4"><input class="form-control" id="id_password2" name="password2" placeholder="Password (again)" required="required" title="" type="password" /></div></div> <div class="form-group required"><label class="col-md-2 control-label">first name</label><div class="col-md-4"><input class="form-control" id="id_first_name" maxlength="30" name="first_name" placeholder="first name" required="required" title="" type="text" /></div></div> <div class="form-group required"><label class="col-md-2 control-label">last name</label><div class="col-md-4"><input class="form-control" id="id_last_name" maxlength="30" name="last_name" placeholder="last name" required="required" title="" type="text" /></div></div> <div class="form-group required"><label class="col-md-2 control-label"> </label><div class="col-md-4"><div class="checkbox"><label><input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service</label></div></div></div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary"> <span class="glyphicon glyphicon-star"></span> Sign Me Up! </button> </div> </div> </form> 我将以下内容添加到我的 CSS 中； .form-group .required .control-label:after { content:"*";color:red; } 仍然没有在必填字段周围显示红色*。我在这里缺少什么？ Bootstrap 3 中不是有直接的方法可以将 * 引入必填字段吗？编辑条款和条件中的*不会立即出现在复选框中。如何解决这个问题？使用 .form-group.required，不带空格。 .form-group.required .control-label:after { content:"*"; color:red; } 编辑：对于复选框，您可以使用伪类：not()。您可以在每个标签后添加所需的 *，除非它是复选框 .form-group.required:not(.checkbox) .control-label:after, .form-group.required .text:after { /* change .text in whatever class of the text after the checkbox has */ content:"*"; color:red; } 注意：未经测试您应该使用 .text 类或以其他方式定位它，尝试这个 html： <div class="form-group required"> <label class="col-md-2 control-label"> </label> <div class="col-md-4"> <div class="checkbox"> <label class='text'>  <input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service </label> </div> </div> </div> 好的第三次编辑： CSS 回到原来的样子 .form-group.required .control-label:after { content:"*"; color:red; } HTML： <div class="form-group required"> <label class="col-md-2"> </label>  <div class="col-md-4"> <div class="checkbox"> <label class='control-label'>  <input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service </label> </div> </div> </div> 假设这就是 HTML 的样子 <div class="form-group required"> <label class="col-md-2 control-label">E-mail</label> <div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div> </div> 要在标签右侧显示星号： .form-group.required .control-label:after { color: #d00; content: "*"; position: absolute; margin-left: 8px; top:7px; } 或标签左侧： .form-group.required .control-label:before{ color: red; content: "*"; position: absolute; margin-left: -15px; } 要制作漂亮的大红色星号，您可以添加以下行： font-family: 'Glyphicons Halflings'; font-weight: normal; font-size: 14px; 或者如果您使用Font Awesome，请添加这些行（并更改内容行）： font-family: 'FontAwesome'; font-weight: normal; font-size: 14px; content: "\f069"; .form-group .required .control-label:after 可能应该是.form-group.required .control-label:after。删除 .form-group 和 .required 之间的空格就是变化。使用简单的CSS， .myform .required:after { content: " *"; color: red; font-weight: 100; } <form class="myform"> <div class="col-md-12"> <label for="xxx_fname" class="form-label required">First Name</label> <input type="text" class="form-control" id="xxx_fname" > </div> <div class="col-md-12"> <label for="xxx_lname" class="form-label required">Last Name</label> <input type="text" class="form-control" id="xxx_lname" > </div> </form 另外两个答案是正确的。当您在 CSS 选择器中包含空格时，您将定位子元素，因此： .form-group .required { styles } 正在定位类为“required”的元素，该元素位于类为“form-group”的元素内。如果没有空格，它的目标是具有 both 类的元素。 “必需”和“表单组” 这个 CSS 对我有用： .form-group.required.control-label:before{ color: red; content: "*"; position: absolute; margin-left: -10px; } 和这个 HTML： <div class="form-group required control-label"> <label for="emailField">Email</label> <input type="email" class="form-control" id="emailField" placeholder="Type Your Email Address Here" /> </div> 这对我有用： CSS .form-group.required.control-label:before{ content: "*"; color: red; } 或 .form-group.required.control-label:after{ content: "*"; color: red; } 基本 HTML <div class="form-group required control-label"> <input class="form-control" /> </div> 我修改了CSS，因为我使用的是bootstrap 3.3.6 .form-group.required label:after{ color: #d00; font-family: 'FontAwesome'; font-weight: normal; font-size: 10px; content: "\f069"; top:4px; position: absolute; margin-left: 8px; } HTML <div class="form-group required"> <label for="return_notes"><?= _lang('notes') ?></label> <textarea class="form-control" name="return_notes" id="return_notes" required="required"></textarea> </div> 只需执行以下操作... CSS .form-group.required .control-label:after { content:"*"; color:red; } HTML <form> <div class="form-group required"> <label class="control-label">Name</label> ... </div> </form> 我们可以做这样的事情： HTML <form> <div class="required"> <label class="control-label required">Name</label> <input type="text"></input> </div> </form> CSS form label.required:after { content: "*"; color: red; } 通过这种方法，表单标签内具有所需类的任何标签都将在其内容后带有“*”。

css forms twitter-bootstrap-3 form-fields

回答 10 投票 0

如何让表格的某些列固定，某些列可滚动？

我正在使用 twitter-bootstrap 3 开发一个网页，有些表格不适合我页面的边距。它们溢出来了。所以我想创建一个像 Excel 电子表格一样工作的结构。最...

javascript html css twitter-bootstrap-3

回答 7 投票 0

防止 Google 地图 InfoWindow 将焦点设置在第一个元素（即按钮）上

每当我加载包含可点击 HTML 元素（即引导按钮）的 Google 地图 InfoWindow 时，第一个可点击元素具有焦点，渲染 UX 的可读性较差。 API：...

jquery google-maps twitter-bootstrap-3

回答 1 投票 0

SweetAlert 引导模式中的提示问题

我已经尝试了两天多在模式引导程序中运行 SweetAlert 提示但没有成功，输入无法访问，我不明白为什么。我需要帮助。 $("#openSWA...