twitter-bootstrap 相关问题

我只是在尝试 Bootstrap，并且有点困惑为什么当我将多个 .col 类应用于 div 时它似乎没有影响。这是我的代码：我只是在尝试 Bootstrap，并且有点困惑为什么当我将多个 .col 类应用于 div 时它似乎没有影响。这是我的代码： <div class="container"> <div class="row"> <div class="col-lg-4 col-md-8 col-sm-10 col-12 text-center"> <div class="card" style="width: 20rem;"> <img class="card-img-top" src="cheryl-winn-boujnida-65955.jpg" alt="Card image cap"> <h4 class="card-title"> <i class="fa fa-circle-o-notch" aria-hidden="true"></i> Fast photo printing </h4> <p class="card-text">Upload content and have it sent to your address within 3 hours</p> </div> </div> <div class="col-lg-4 col-md-8 col-sm-10 col-12 text-center"> <div class="card" style="width: 20rem;"> <img class="card-img-top" src="neonbrand-371471.jpg" alt="Card image cap"> <h4 class="card-title"> <i class="fa fa-superpowers" aria-hidden="true"></i> Total access </h4> <p class="card-text">Access your media from any device, from any location</p> </div> </div> <div class="col-lg-4 col-md-8 col-sm-10 col-12 text-center"> <div class="card" style="width: 20rem;"> <img class="card-img-top" src="allef-vinicius-205147.jpg" alt="Card image cap"> <h4 class="card-title"> <i class="fa fa-ravelry" aria-hidden="true"></i> Freedom </h4> <p class="card-text">Choose your package to suit your needs and usage</p> </div> </div> </div> </div> div 在大屏幕上水平排列正常，但是当我减小屏幕尺寸时，div 会堆叠，但似乎没有考虑我尝试与 .col 类一起应用的设置。如果 Bootstrap 中列类别值的总和大于 12，则列将堆叠。例如，在您的代码中，您为三个 div 指定了一个类 col-md-8。因此，行的大小为 8*3 = 24，大于 12，无法放入 Bootstrap 容器。因此它们堆积起来。为了避免堆叠，您应该将 col-md-8 设置为 col-md-4，并类似地将 col-sm-10 更改为 col-sm-4。这应该可以避免堆叠。

twitter-bootstrap

回答 1 投票 0

使用多个 Bootstrap 列大小的目的是什么？

我对 Bootstrap 相当陌生，我了解 Bootstrap 如何使用 12 列网格。当我想利用 Bootstrap 网格时，我通常会这样做： ... 我对 Bootstrap 相当陌生，并且我了解 Bootstrap 如何使用 12 列网格。当我想利用 Bootstrap 网格时，我通常会这样做： <div class="row"> <div class="col-md-6"> ... </div> <div class="col-md-6"> ... </div> </div> 我还了解不同的列大小用于不同的屏幕尺寸： <div class="row"> <div class="col-xs-6"> ... </div> <div class="col-xs-6"> ... </div> </div> 但是，我看到很多人做了类似的事情： <div class="row"> <div class="col-xs-6 col-md-6 col-lg-6"> ... </div> <div class="col-xs-6 col-md-6 col-lg-6"> ... </div> </div> 为什么要使用多种列尺寸？浏览器会检测哪一个适合使用吗？在此示例中绝对没有理由拥有所有三个类： <div class="row"> <div class="col-xs-6 col-md-6 col-lg-6"> ... </div> <div class="col-xs-6 col-md-6 col-lg-6"> ... </div> </div> 它实际上与此相同： <div class="row"> <div class="col-xs-6"> ... </div> <div class="col-xs-6"> ... </div> </div> Bootstrap 网格类适用于高于指定大小的所有尺寸，因此应用 col-xs-6 将导致该元素在任何较大的屏幕尺寸（如 sm、md 等）上也包含 6 列。我猜无论谁包含所有这三个第一个示例中的类对 Bootstrap 网格系统的工作原理没有深入的了解。如果您希望元素在不同的屏幕尺寸上具有不同的尺寸，则只需包含多个类： <div class="row"> <div class="col-xs-4 col-md-3 col-lg-2"> ... </div> <div class="col-xs-8 col-md-9 col-lg-10"> ... </div> </div> 多种col尺寸适用于不同类型的屏幕： xs：超小屏幕（手机） sm：类似于平板电脑的屏幕 md：像桌面一样的屏幕 lg：更大桌面的屏幕基本上，这些将在 media 中的各种 bootstrap.css 查询中定义，这有助于浏览器检测要使用哪一个。在这里了解更多附录使用上述不同的 col 类应该是为不同屏幕指定不同列大小的唯一情况。例如：如果您想要在 col 中放置 12 个 xs，在 col 中放置 6 个 sm，在 col 中放置 3 个 md，在 col 中放置 2 个 lg，那么您可以将其用作 col-xs-12 col-sm-6 col-md-3 col-lg-2 。否则，如果所有屏幕的它们都相同，那么您可以使用上面的任何一个，如 col-lg-6 中所示。这将告诉浏览器使用 6 cols，无论屏幕尺寸如何。查看此页面以获得想法 http://getbootstrap.com/examples/grid/ 一般来说，使用多个 col 类背后的想法是根据屏幕尺寸使用不同的宽度百分比：示例：如果你在元素上添加 col-md-6 和 col-xs-12 ，当屏幕尺寸接近中等断点时，它将使用 6 列，但当屏幕尺寸较小时，它将使用整个宽度该方法通常用于屏幕尺寸。这样您就不会在 7 英寸屏幕上看到 7 列。例如;使用 <div class="col-xs-1 col-md-3 col-lg-6">，您可以在手机上显示 1 列，在大型平板电脑上显示 3 列，在桌面显示器上显示 6 列。

html css twitter-bootstrap

回答 4 投票 0

如果轮播被包裹在浮动 CSS 中，Bootstrap 5 轮播在按下一个或上一个时会显示放大的图像

我正在使用 Bootstrap v5.3.3 Carousel。我遇到的问题是，如果轮播包含在 float-start 类中，则按下一个或上一个时，轮播会显示放大的图像。最小的co...

css twitter-bootstrap

回答 1 投票 0

Premium Fullcalendar 未选择 Bootstrap5 主题

这就是我所看到的（主题看起来不适用）这就是我期望它的样子我可以让 bootstrap 主题在标准版 fullcalendar 上运行，但不能在高级版上运行

twitter-bootstrap fullcalendar bootstrap-5 fullcalendar-6

回答 1 投票 0

我的下拉菜单的子菜单在任何浏览器上都不显示

我使用 Laravel 框架用 php 开发我的网站。下面是我的下拉菜单的源代码，但是子菜单不会显示在浏览器上。可能是什么问题？我使用 Laravel 框架使用 php 开发我的网站。下面是我的下拉菜单的源代码，但是子菜单不会显示在浏览器上。可能是什么问题？ <div class="btn-group"> @guest <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> My Account </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="{{route('login')}}">Login</a></li> <li><a class="dropdown-item" href="{{route('register')}}">Register</a></li> </ul> @endguest @auth <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> {{Auth::user()->name}} </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="{{route('app_logout')}}">Logout</a></li> </ul> @endauth </div> 我尝试使用 Firefox、Google Chrome 和 Microsoft Edge 浏览器，但仍然一无所获根据您的代码片段： Based on your code snippet: html Copy code <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> You are using data-bs-toggle="dropdown", which is correct for Bootstrap 5. However, Laravel 8 (as of my last update) ships with Bootstrap 4 by default, where the correct attribute would be data-toggle="dropdown" instead of data-bs-toggle="dropdown". 您正在使用 data-bs-toggle="dropdown"，这对于 Bootstrap 5 来说是正确的。但是，Laravel 8（截至我上次更新）默认情况下随 Bootstrap 4 一起提供，其中正确的属性是 data-toggle=" dropdown" 而不是 data-bs-toggle="dropdown"。如果您打算使用 Bootstrap 5 功能，请确保您已更新 Laravel 项目以使用 Bootstrap 5。您可以通过更新 package.json 以包含 Bootstrap 5，然后运行 npm install ，然后运行 npm run dev 来编译您的资源来完成此操作. 致以诚挚的问候丹麦哈菲兹 |质量检查助理 https://www.ictinnovations.com https://www.ictbroadcast.com

php html css laravel twitter-bootstrap

回答 1 投票 0

过滤“当前菜单项”类以使用“活动”来代替

我正在基于 Roots 主题构建一个自定义主题，该主题现在使用 Twitter Bootstrap 作为框架。它使用自定义“walker”进行导航，因此我不能仅通过 Header.p 中的 PHP 对其进行过滤...

php css wordpress twitter-bootstrap wordpress-theming

回答 2 投票 0

当页面滚动时，Bootstrap 5 工具提示放置最重要的问题

当强制放置顶部时，我在引导程序中遇到工具提示问题。我现在使用的是最新版本：5.1.3 我尝试创建一个代码片段，但问题在代码上无法重现...

javascript html css twitter-bootstrap

回答 2 投票 0

响应式引导导航栏

我正在尝试为我的网站制作一个导航栏，左侧有一个下拉菜单，中间有图像，右侧有可折叠项目。我正在使用 bootstrap with less 来设置导航栏的样式，但我...

html css twitter-bootstrap less

回答 4 投票 0

引导表和jsf

我尝试将引导表库与 jsf 一起使用，但它对我不起作用。我有一个 Facelet 模板，其中包含以下文件：我尝试将引导表库与 jsf 一起使用，但它对我不起作用。我有一个 Facelet 模板，其中包含以下文件： <h:outputStylesheet name="./css/bootstrap-datepicker.css"/> <h:outputStylesheet name="./css/bootstrap.css"/> <h:outputStylesheet name="./css/bootstrap-table.css"/> <h:outputStylesheet name="./css/sb-admin.css"/> <h:outputStylesheet name="./css/morris.css"/> <h:outputStylesheet name="./css/AdminLTE.css"/> <h:outputScript name="jquery/jquery-plugins.js" library="primefaces"/> <h:outputScript name="./js/jquery.js"></h:outputScript> <h:outputScript name="./js/addrow.js"></h:outputScript> <h:outputScript name="./js/modal.js"></h:outputScript> <h:outputScript name="./js/bootstrap.js"></h:outputScript> <h:outputScript name="./js/app.js"></h:outputScript> <h:outputScript name="./js/dashboard.js"></h:outputScript> <h:outputScript name="./js/demo.js"></h:outputScript> <h:outputScript name="./js/bootstrap-datepicker.js"></h:outputScript> <h:outputScript name="./js/flot-data.js"></h:outputScript> <h:outputScript name="./js/bootstrap-table-all.js"></h:outputScript> <h:outputScript name="./js/raphael.min.js"></h:outputScript> <h:outputScript name="./js/morris.js"></h:outputScript> <h:outputScript name="./js/formatter.js"></h:outputScript> <h:outputScript name="./js/jquery.formatter.js"></h:outputScript> 我创建了一个 xhtml 文件，它是该模板的客户端。默认的引导程序在每个客户端中都可以正常工作，我可以使用 bootstrap.css 中的每个类但是当我尝试在客户端 xhtml 中创建一个表时，如下所示： <table id="tsttable" class="table table-bordered table-hover" > <tr> <th>Azonosító</th> <th>Albetét típusa</th> <th>Utca neve</th> <th>Költségviselő neve</th> </tr> <tbody class="searchable"> <ui:repeat var="pack" value="# {mainViewController.showPackageContent()}" varStatus="status"> <tr> <td> <h:commandLink class="glyphicon glyphicon-pencil" value="#{pack.id}" actionListener="#{mainViewController.navigateToChosedCustomer(item.id)}"> </h:commandLink> </td> <td>#{pack.types.description}</td> <td>#{pack.BFlatDataCollection.addrStreet}</td> <td>#{pack.BAssocCaseCollection.userId.lastName} #{pack.BAssocCaseCollection.userId.firstName} </td> </tr> </ui:repeat> </tbody> </table> 然后，如果我将这个“data-toggle =“table”属性添加到表中，它不会有任何效果.. 但是如果我尝试使用这样的 js 在客户端 xhtml 中创建一个表，代码将创建引导表： $('#tsttable').bootstrapTable({ columns: [{ field: 'id', title: 'Item ID' }, { field: 'name', title: 'Item Name' }]}); 如何将 bootstrap table 与 jsf 一起使用？有人有什么想法吗？谢谢你！ Jsf 在这方面只不过是一个服务器端 html 生成器。如果你可以用纯 html 来实现（没有 $('#tsttable').bootstrapTable({...})），那么你也可以用 jsf 来实现。因此，弄清楚这一点将使上面的示例自动起作用。但弄清楚这一点应该是一个不同的问题

css twitter-bootstrap jsf

回答 1 投票 0

捆绑和缩小 Bootstrap 5 CSS 模板时出现语法错误

我正在使用 bootstrap 5 模板（我有缩小版），它看起来像这样。该文件是使用 gulp 生成的：我想将此文件包含在 ASP.NET MVC 5 捆绑包中，因为它添加了缓存

asp.net-mvc twitter-bootstrap asp.net-mvc-5 bootstrap-5 bundling-and-minification

回答 1 投票 0

如何删除 Bootstrap 表行之间的空格？

这个 Codepen 可以工作，但我不确定这是相同的表类型。这是小提琴。 #买家{ 边框折叠：分开；边框间距：0 0px； } tr { 背景：粉色； /* 由通讯添加...

html css twitter-bootstrap bootstrap-4

回答 1 投票 0

twitter-bootstrap 相关问题

最新问题