bootstrap-4 相关问题

Bootstrap 4 与可折叠和显示实用程序的兼容性

我不确定有多少人经历过这个问题，因为我无法真正找到有关它的问题，但我注意到 Bootstrap 4 显示实用程序无法与 .collapse 类一起正常工作，而 .collapse 类曾经...

如何使引导日期选择器始终可见/打开？

解释 我成功地使用“输入类型=日期”作为 Bootstrap 5.3 中的日期选择器来选择数据查看的日期。 我遇到的问题是：我必须单击它才能可见。 为了...

下拉菜单无法使用 ASP.NET Core MVC 工作

_Layout.cshtml： @if (HttpContextAccessor.HttpCo...

Bootstrap 进度条在 UpdatePanel 中不起作用 - ASP.NET

我正在尝试使用UpdatePanel（Ajaxtoolkit）中的引导进度条。我想通过 for 循环显示进度条的进度。以下是 ASP.NET 代码 我正在尝试使用UpdatePanel（Ajaxtoolkit）中的引导进度条。我想通过 for 循环显示进度条的进度。以下是 ASP.NET 代码 <div class="progress" style="width:80%;margin:auto;"> <div id="divProgressBar" runat="server" class="progress-bar" role="progressbar" aria- valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 0%;"> 0% </div> </div> 以下是C#的代码 intProgressBarCurrentPercentage += intProgressBarPercentageIncrement; divProgressBar.Style.Add("width", intProgressBarCurrentPercentage.ToString("F1") + "%"); divProgressBar.Attributes.Add("aria-valuenow", intProgressBarCurrentPercentage.ToString("F1")); divProgressBar.InnerText = intProgressBarCurrentPercentage.ToString() + "%"; 问题在于，当将新值分配给进度条时，进度条不会增加进度。 我相信这是因为进度条位于 UpdatePanel 中，并且我不想将进度条移到 UpdatePanel 之外。 我尝试在 UpdatePanel 的触发部分添加进度条，但它不起作用。 此代码对我有用： 标记： <div class="progress" style="width: 30%; margin: auto;float:left"> <div id="divProgressBar" runat="server" class="progress-bar" role="progressbar" > <a href="../App_Data/">../App_Data/</a> aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 0%;"> 0% </div> </div> <br /> <br /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br /> <asp:Button ID="cmdIncrement" runat="server" Text="Increment" OnClick="cmdIncrement_Click" /> 背后代码： protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) TextBox1.Text = "1"; setbar(0); } protected void cmdIncrement_Click(object sender, EventArgs e) { const decimal MyMax = 10; int Count = Convert.ToInt32(TextBox1.Text); Count++; TextBox1.Text = Count.ToString(); decimal MyPercent = Count / MyMax * 100; setbar(MyPercent); } void setbar(decimal MyPercent) { divProgressBar.Style.Add("width", MyPercent + "%"); divProgressBar.Attributes.Add("aria-valuenow", MyPercent.ToString()); divProgressBar.InnerText = MyPercent.ToString() + "%"; } 结果： 如果我使用更新面板，上面的方法也有效。 UpdatePanel（Ajax 工具包）。 不！ Ajax 工具包 100% 独立，与更新面板的使用“没有任何关系”。 AjaxToolKit 是一个控件库，如“accordion”、“dialog”、“ajaxfileupload”等。 但是，在网页中使用更新面板来采用某些ajax功能与ajaxtoolkit无关，并且您可以在没有ajaxtoolkit的情况下自由使用更新面板，并且它们实际上彼此不相关。 我还应该指出，如果您将上面的示例放置在更新面板中，上面发布的示例代码也可以工作。 编辑：问题作者现在想要一个循环 请记住，要进行 Web 开发，您必须掌握页面生命周期的概念，即所谓的“往返”。 简单说明： 在代码运行期间，用户永远不会看到通过代码隐藏对浏览器“DOM”进行的更改。浏览器的副本位于服务器上，当您的代码更改浏览器（现在位于服务器上）时，最终用户只会看到浏览器等待/旋转。只有在所有代码运行之后，然后浏览器返回客户端，用户才能看到结果。 因此，页面生命周期（往返）如下所示： 你有这个： 注意您的页面类 - 代码隐藏不在服务器的内存中。 你没有这个： 而你甚至没有这个： 注意这里非常小心 - 网页位于客户端计算机上 - 它根本不存在于网络服务器端。 因此，当您单击按钮或进行回发时，您就开始了往返。 这个： 我们的网页被发送到服务器。你现在有了这个： 现在页面类的实例已创建，并且后面的代码开始运行。 您的后台代码可以修改控件（甚至控件可见或不可见），但页面不与用户交互 - 只有代码可以修改网页（用户看不到一项或多项更改）。 网页可能会发生一次或多次更改，但是当您更新文本框等内容时，用户还看不到这些更改。因此，如果您运行循环 1 到 10，并更新文本框，则文本框将更新为 1 到 10。但是，最终用户看不到任何内容，因为该网页（和代码）正在服务器上运行。 服务器上正在发生网页更改 - 客户端浏览器不再有该网页！ 一旦所有代码运行完毕，页面才会返回客户端浏览器。 服务器端类实例和代码（和变量）已被丢弃 - 不存在！您的服务器端页面类已被处置 - 从内存中删除，并且后面的网页代码不再存在。 因此，页面返回到客户端，重新显示，加载 JavaScript，然后 JavaScript 开始运行。因此，即使是客户端页面现在也可以 100% 重新加载。 那么，现在已经掌握了上述关于回发和轮询类型（页面生命周期）的知识了吗？ 好的，这意味着要显示网页的更改，页面必须进行往返。如果您使用更新面板，那么该更新面板必须进行往返！ 这种循环的另一种方法是什么？您使用客户端 JavaScript 代码。 但是，让我们以上面现有的示例为例，当我们单击开始时，让我们循环 1 到 10，但请记住，我们需要往返才能显示浏览器更新！ 因此，既然我们需要往返，那么最简单的方法就是在页面上放置一个计时器控件。 （这意味着我们不必学习和编写一些 JavaScript 代码）。 所以，我们也使用更新面板。 （请记住，更新面板仍然具有上述完整页面生命周期 - 即使页面加载每次都会触发并运行 - 即使使用更新面板）。 所以，现在我们有了这个标记： <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div class="progress" style="width: 30%; margin: auto; float: left"> <div id="divProgressBar" runat="server" class="progress-bar" role="progressbar"> <a href="../App_Data/">../App_Data/</a> aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 0%;"> 0% </div> </div> <asp:Timer ID="Timer1" runat="server" Enabled="False" Interval="1000" OnTick="Timer1_Tick"> </asp:Timer> <br /> <br /> <asp:Button ID="cmdStart" runat="server" Text="Start" CssClass="btn" OnClick="cmdStart_Click" /> <asp:HiddenField ID="HMyCount" runat="server" /> </ContentTemplate> </asp:UpdatePanel> 这段代码： protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) setbar(0); } protected void cmdStart_Click(object sender, EventArgs e) { HMyCount.Value = "0"; Timer1.Enabled = true; } protected void Timer1_Tick(object sender, EventArgs e) { const decimal MyMax = 10; int Counter = Convert.ToInt32(HMyCount.Value); Counter++; HMyCount.Value = Counter.ToString(); if (Counter > 10) { Timer1.Enabled = false; // stop our timer return; } decimal MyPercent = Counter / MyMax * 100; setbar(MyPercent); } void setbar(decimal MyPercent) { divProgressBar.Style.Add("width", MyPercent + "%"); divProgressBar.Attributes.Add("aria-valuenow", MyPercent.ToString()); divProgressBar.InnerText = MyPercent.ToString() + "%"; } 现在的结果是这样的： 我应该发布一个有效的 JavaScript 示例，因为我们可以 100% 客户端运行此代码，这意味着不需要回发，也不需要往返。

如何正确显示新版块？

我的问题是，当我尝试在主页之后创建新部分或任何新内容时，它不会出现在新页面上，但仍显示在主页本身上。我已将项目上传到

如何创建固定国家代码的手机号码输入框

我正在尝试创建一个移动输入框，其中手机号码和国家/地区代码由分隔符分隔，或者只是将国家/地区代码固定在字段中，但无法做到这一点。 像这样的东西： （http...

使用 Internet Explorer 双击复选框时出现问题

我想禁用 Internet Explorer 上的双击复选框。双击会导致功能错误（仅在 Internet Explorer 11 上）。 $('#editArchivesTable tbody').on('clic...

有什么方法可以获取断点特定的宽度类吗？

Bootstrap 4 包括宽度类别： W-25 W-50 W-75 W-100 我只想为某些断点及以上指定宽度；例如，“w-md-25”等。 是否可以在SCSS中添加这样的类...

jquery.dataTables.min.js：94未捕获的范围错误：超出最大调用堆栈大小

我使用 jquery ajax bootstrap dataTables，当我尝试下载超过 20k 条记录时，控制台日志中出现此错误“Uncaught RangeError：最大调用堆栈大小超出 jquery.dataTa...

破折号 dbc 内的图标。按钮不显示

我正在编写一个破折号表单来从用户那里获取密码。我想要一个图标，允许用户以纯文本而不是隐藏的方式查看他们的输入。为此，我创建了一个 InputGrou...

使用 Bootstrap 使表格标题显示在底部

我正在声明一个带有标题的表格： ... 我正在声明一个带有标题的表格： <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-bordered"> <caption>Why does this display below contents?</caption> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> 但是，即使 caption 元素是 table 的第一个子元素，当我使用 Bootstrap 类时，标题会显示在表格下方。 如何将其移动到桌子上方？ 那是因为从版本 4 开始，Bootstrap 有了默认的标题 css 样式 - caption-side: bottom 当您更改caption-side: top;时，您的标题将显示在表格顶部。 更新 从版本5开始，您还可以使用<caption>将.caption-top放在桌子顶部： <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-bordered caption-top"> <caption>Caption displayed above contents</caption> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table>

动态创建树形视图下拉菜单 - $(this) 不适用于单击事件

我正在尝试动态创建此 bootstrap 4 下拉列表（请参阅@Gerhard Gotz 的回答）。 硬编码列表对我有用，但是，我正在尝试动态创建此列表，然后填充我...

带有 Bootstrap 主题的 Select2 不支持输入组类

我尝试将 select2 与输入组一起使用，但按钮始终位于 select2 控件之后的下一行。 如果删除 select2 类，它会按预期工作。 为什么选择2

CSS 按钮在 Mozilla Firefox 中无法内嵌显示

我的搜索按钮在 Mozilla Firefox 中显得不合适，我不知道为什么会这样。 我正在将 Bootstrap 4 与 Angular 2 结合使用 这是它在 Chrome 上的样子 这就是它

引导行上的负边距

Bootstrap 行的边距（左侧和右侧）为 -15px。 据我了解，这主要有两个原因： .container 的内边距（左和右）为 15px col-* 的间距为 15px。 所以...

Bootstrap 4 - 右对齐导航栏项目[重复]

我正在尝试将我的导航栏项目与 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">&times;</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">&times;</span> </button> </div>