Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。
我正在使用 Bootstrap 5 和 NGX-Bootstrap 构建 Angular 12 应用程序。我想创建一个默认情况下处于活动状态但可折叠的侧面导航栏。是否可以使用 Bootstrap 5 来实现这一点
我有一个div，如果用户单击一个复选框（是），我想显示它；如果用户单击其他复选框（否），则隐藏它 我如何使用 javascript、jquery 或 css 代码来显示和隐藏 div ...
如何使用SASS自定义Bootstrap 5.3中的警报组件？
我对 $primary 和 $ secondary 变量进行了更改。这改变了我测试的所有组件，如按钮、卡片、导航栏。但它不会改变警报的颜色。这是我的习惯...
我遵循引导参考上的网格示例结构，但我的代码没有水平间隙（只有垂直间隙）。这与版本无关，因为当我将示例代码粘贴到我的 htm 中时...
angular-2-dropdown-multiselect - 自定义宽度 100%
我正在实现这个 angular-2-dropdown-multiselect 组件： https://www.npmjs.com/package/angular-2-dropdown-multiselect 该组件工作正常，但我需要将其设置为适合续...
需要删除我的以下引导程序的背景颜色 #fh5co-英雄 .fh5co-overlay { 位置：绝对； 顶部：0； 左：0； 右：0； 底部：0； z 索引：9； 背景：#3b3d40； // n...
Bootstrap 5 选项卡窗格无法与 Flexbox 正常配合工作
我直接从文档页面使用准系统 Bootstrap 5 选项卡（药丸）设置： 我直接从 Docs 页面使用准系统 Bootstrap 5 选项卡（药丸）设置： <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div> </div> 然后我用 tab-panes 填充 floating-divs： .floating-div { float: left; display: block; height: 100px; width: 100px; border: 1px solid #dddddd; margin: 10px 10px 0 0; } .pane-1 { background-color: green; } .pane-2 { background-color: orange; } .pane-3 { background-color: blue; } 到目前为止，一切都按预期进行 - JsFiddle . 然后我将标准 Bootstrap 的 Flexbox 类应用到 tab-pane，以根据我的喜好对齐选项卡内容 d-flex flex-wrap justify-content-between。 这就是整个事情开始走下坡路的地方 - JsFiddle . 第一个 tab-pane 中的内容布局方式正是我所追求的，但由于某种原因，所有其他 tab-pane 中的内容都向下移动。不仅如此，仔细检查后发现，每个 tab-pane 都包含所有应该分布在 3 个不同 div 上的 floating-div，其中一些是不可见的... 现在我的问题是：我的 CSS 或我使用 Bootstrap 的 Flexbox 类的方式有问题吗？还是 Bootstrap 中的错误？ 因为“.d-flex”属性带有“display: flex! Important”说明符。 但是“.tab-content> .tab-pane”仅使用“display: none”格式。在这种情况下，“.d-flex”将占主导地位，并且在所有情况下都将保持为“display: flex”。 另一方面，由于“opacity: 0”是不可见的，但它会占用空间。 为了解决这个问题， 方法一： 在“.tab-pane”内创建一个新元素。 <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"> <div class="d-flex flex-wrap justify-content-between"> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> </div> </div> 方法二： 编写一个新类。 “.d-maybe-flex” .d-maybe-flex { display: flex; } <div class="tab-pane fade show active d-maybe-flex flex-wrap justify-content-between" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> </div> 示例1 .floating-div { float: left; display: block; height: 100px; width: 100px; border: 1px solid #dddddd; margin: 10px 10px 0 0; } .pane-1 { background-color: green; } .pane-2 { background-color: orange; } .pane-3 { background-color: blue; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- CSS only --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <!-- JavaScript Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Green</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Ornage</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Blue</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"> <div class="d-flex flex-wrap justify-content-between"> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> </div> </div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"> <div class="d-flex flex-wrap justify-content-between"> <div class="floating-div pane-2"></div> <div class="floating-div pane-2"></div> <div class="floating-div pane-2"></div> <div class="floating-div pane-2"></div> <div class="floating-div pane-2"></div> </div> </div> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"> <div class="d-flex flex-wrap justify-content-between"> <div class="floating-div pane-3"></div> <div class="floating-div pane-3"></div> <div class="floating-div pane-3"></div> <div class="floating-div pane-3"></div> <div class="floating-div pane-3"></div> <div class="floating-div pane-3"></div> </div> </div> </div> 示例2 .d-maybe-flex { display: flex } .floating-div { float: left; display: block; height: 100px; width: 100px; border: 1px solid #dddddd; margin: 10px 10px 0 0; } .pane-1 { background-color: green; } .pane-2 { background-color: orange; } .pane-3 { background-color: blue; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- CSS only --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <!-- JavaScript Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Green</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Ornage</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Blue</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active d-maybe-flex flex-wrap justify-content-between" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> <div class="floating-div pane-1"></div> </div> <div class="tab-pane fade d-maybe-flex flex-wrap justify-content-between" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"> <div class="floating-div pane-2"></div> <div class="floating-div pane-2"></div> <div class="floating-div pane-2"></div> <div class="floating-div pane-2"></div> <div class="floating-div pane-2"></div> </div> <div class="tab-pane fade d-maybe-flex flex-wrap justify-content-between" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"> <div class="floating-div pane-3"></div> <div class="floating-div pane-3"></div> <div class="floating-div pane-3"></div> <div class="floating-div pane-3"></div> <div class="floating-div pane-3"></div> <div class="floating-div pane-3"></div> </div> </div> .d-flex类应用display: flex !important，覆盖display: none中的.tab-content > .tab-pane，使其保持可见。 此外，opacity: 0使元素不可见，但仍然占用空间。 解决方案： 您可以通过确保 Flexbox 布局仅影响 active 选项卡窗格，而不影响隐藏的选项卡窗格来解决此问题。 一种可能的方法是使用 CSS 规则，将 display: none 和 !important 应用于具有 .tab-pane 类但不活动 的 d-flex 元素。以下是如何做到这一点的示例： .tab-pane.d-flex:not(.active) { display: none !important; }
我有一个启用了引导程序和多重选择的列表框。 问题是，当选择长文本选项（启用水平滚动）时，所选选项文本将被截断为...
我正在构建一个用于 Sitefinity 网站的自定义大型菜单。我仍在学习 C# 和 Razor，因此请原谅我的代码方法中的任何错误。我正在使用 bootstrap 来完成大部分繁重的 CSS 工作...
目前我有一个下拉菜单，当用户将鼠标悬停在它上面时会弹出。下拉菜单当前显示 8 个链接。我想放置 21 个链接，但这会占据整个屏幕。怎么办...
我需要垂直滚动条来选择框选项列表。我必须只显示列表的前几项。我无法控制列表中的项目数量。 我已经检查了所有类似的任务...
我正在创建一个弹出 div（模式），默认情况下会出现在屏幕上。不过，我成功地通过单击按钮打开了它，但我希望每次运行 HTML 页面时都默认打开它。 这是我...
选项卡 1 <div class="ui-tab-container"> <uib-tabset> <uib-tab heading="Region Wise" index="region" active="region_wise">Tab 1</uib-tab > <uib-tab heading="Branch Wise" index="branch" active="state_tab">Tab 2</uib-tab> <uib-tab heading="City Wise" index="city" active="city_tab">Tab 3</uib-tab> <uib-tab heading="Counter Wise" index="counter" active="counter_tab">Tab 4</uib-tab> </uib-tabset> </div> 没有显示任何选项卡，当我切换到引导选项卡集时，它们工作正常，但我无法在单击第一个选项卡上的按钮时从一个选项卡切换到另一个选项卡，即使我从内部将该选项卡的 active 属性设置为 true按钮的功能（点击时） “引导”：“~3.3.0” “角度引导”：“〜2.3.1” 预先感谢。 试试这个 <uib-tabset active="'region'"> <uib-tab heading="Region Wise" index="'region'" active="region_wise">Tab 1</uib-tab > <uib-tab heading="Branch Wise" index="'branch'" active="state_tab">Tab 2</uib-tab> <uib-tab heading="City Wise" index="'city'" active="city_tab">Tab 3</uib-tab> <uib-tab heading="Counter Wise" index="'counter'" active="counter_tab">Tab 4</uib-tab> </uib-tabset> 您忘记将 active 指令添加到 uib-tabset 并为其赋予值 active（默认：第一个选项卡的索引）- 选项卡的活动索引。将其设置为现有选项卡索引将使该选项卡处于活动状态。 此外，您还没有实例化 active 元素中的 uib-tab 值 标签索引。必须是唯一的数字或字符串。 所以它应该是这样的 index="'region'" （注意里面的单个撇号，索引需要一个表达式！）或者 index="1" 噗噗 据我了解，ui-tab内的指令active必须与模型中的某些布尔变量绑定。 <uib-tab ... active="boolean_variable_to_bind">...</uib-tab >
我正在建立我的投资组合网站。我在网页上添加了一个滑块，我想知道如何控制滑块和字幕速度。 我曾尝试包含此 JavaScript 代码来查看...
我想做的是通过 Ajax 获取一个 json 对象，并仅使用一种值填充 Bootstrap Typeahead。 这是我的代码： nameTypeHead: 函数 () { var _self = 这个， ...
为什么 bootstrap 会破坏 WordPress 管理？
考虑以下 WordPress 插件代码： 考虑以下 WordPress 插件代码： <?php /** * Plugin Name: test * Description: This plugin is just a test for bootstrap css * Version: 1.0.0 * Author: Gavin Simpson * License: GPL2 */ class testclass { private static $instance; public static function get_instance_advert() { if( null == self::$instance ) { self::$instance = new testclass(); } return self::$instance; } private function __construct() { add_action( 'admin_enqueue_scripts', array($this,'inistyleheets')); } function inistyleheets() { wp_register_style( 'mybootstrap', plugins_url() . '/test/assets/bootstrap-3.3.5-dist/css/bootstrap.min.css'); wp_enqueue_style('mybootstrap'); } } add_action( 'plugins_loaded', array( 'testclass', 'get_instance_advert')); ?> 激活上述内容后，Wordpress 管理中的“屏幕选项”按钮将停止工作。 问题 100% 与仅加载 Bootstrap css 有关，因此该示例不会加载 bootstrap 本身。在我的生产代码中，引导程序工作得很好，它只是破坏了所描述的“屏幕选项”按钮，就像上面的基本插件代码一样。 我已经尝试了所有的基本主题，即二十四、二十五和二十六。他们中的任何一个都没有运气，结果都一样。 冗长的解决方案，所以这里不再重复，但链接是 https://rushfrisby.com/using-bootstrap-in-wordpress-admin-panel。 （是的，我知道发布链接并不酷，但我不想复制并粘贴别人的解决方案） 最重要的是，您需要包装您可能想要添加 Bootstrap CSS 的任何代码，上面链接中的解决方案负责以一种非常有效的方式加载 Bootstrap。 更新 该链接现在是 404，所以这个答案毫无用处。 对于“屏幕选项”按钮不起作用的情况（可能还有其他一些情况），您可以尝试使用 .hidden[style*='display: block'] { display:block !important; } 在引导后加载的一些 CSS 中。有限的测试表明该按钮现在可以工作，但由于 Bootstrap 样式的原因，下拉列表的内容看起来确实有所不同。因此，我将引导程序的排队限制为仅在我真正需要的管理屏幕上使用。我不确定尝试修复该元素的样式对我来说是否值得。 我发现问题在于屏幕选项面板中控件上的类名，wordpress load-options css 包含一个针对具有“隐藏”类的元素的条目，并设置“display: none”以确保这些元素不显示最初。 当您单击“屏幕选项”按钮时，它会触发一个 javascript 函数，该函数应该使该面板出现，因为它使用“display: block”在这些元素上设置样式属性，这应该覆盖 css 语句。 但是 bootstrap css 也有一个 css 语句，该语句以类名“hidden”为目标，但包含“display: none !important”，“!important”会导致 bootstrap css 语句继续覆盖在元素本身。所以一个肮脏的解决方案是从 bootstrap css 中删除 !important 部分。
WordPress paginate_links - 如何使用它？
我想向页面及其子页面添加数字分页。这是我想要创建的分页（从引导程序）： ... 我想向页面及其子页面添加数字分页。这是我想要创建的分页（从引导程序）： <nav> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> 这是我的代码： <!-- block --> <div class="row grid events-block"> <?php $parent = $post->ID; // query_posts('posts_per_page=15&post_type=page&post_parent='.$parent); query_posts(array('posts_per_page'=>'1', 'post_type' => 'page', 'post_parent' => $parent, 'paged' => get_query_var('paged'))); while (have_posts()) : the_post(); ?> <!-- item --> <div class="grid-item col-md-6 col-sm-6 col-xs-12 event-item"> <div class="date-box"> <?php echo $event_dates; ?> </div> <div class="event-item-text-box"> <div class="event-item-text-inner-box"> <h3 class="heading-item"><a href="#" target="_blank"><?php the_title(); ?></a></h3> <p><?php the_excerpt(); ?></p> </div> </div> </div> <!-- item --> <?php endwhile; ?> <?php // Reset the post to the original after loop. otherwise the current page becomes the last item from the while loop. // https://codex.wordpress.org/Function_Reference/wp_reset_query wp_reset_query(); ?> </div> <!-- block --> <?php $args = array( 'base' => '%_%', 'format' => '?paged=%#%', 'total' => 1, 'current' => 0, 'show_all' => false, 'end_size' => 1, 'mid_size' => 2, 'prev_next' => true, 'prev_text' => __('« Previous'), 'next_text' => __('Next »'), 'type' => 'plain', 'add_args' => false, 'add_fragment' => '', 'before_page_number' => '', 'after_page_number' => '' ); ?> <?php echo paginate_links( $args ); ?> 但是我无法让它工作。我错过了什么想法吗？ 分页方式：上一页 1 2 3 下一页 <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $data= new WP_Query(array( 'post_type'=>'YOUR_POST_TYPE', // your post type name 'posts_per_page' => 3, // post per page 'paged' => $paged, 'post_status' => 'publish', 'orderby' => 'date', 'order' => 'DESC' )); if($data->have_posts()) : while($data->have_posts()) : $data->the_post(); // Your code endwhile; $total_pages = $data->max_num_pages; if ($total_pages > 1){ $current_page = max(1, get_query_var('paged')); echo paginate_links(array( 'base' => get_pagenum_link(1) . '%_%', 'format' => '/page/%#%', 'current' => $current_page, 'total' => $total_pages, 'prev_text' => __('« prev'), 'next_text' => __('next »'), )); } ?> <?php else :?> <h3><?php _e('404 Error: Not Found', ''); ?></h3> <?php endif; ?> <?php wp_reset_postdata();?> 您可以尝试一下上面的代码吗？我觉得对你有帮助。 这是一个具有可爱的引导分页链接的功能。 function bootstrap_pagination() { global $wp_query; $big = 999999999; $listString = paginate_links(array( 'base' => str_replace($big, '%#%', get_pagenum_link($big)), 'format' => '?paged=%#%', 'current' => max(1, get_query_var('paged')), 'total' => $wp_query->max_num_pages, 'prev_text' => __('← Previous'), 'next_text' => __('Next →'), 'type' => 'list', )); $listString = str_replace("<ul class='page-numbers'>", '<ul class="pagination">', $listString); $listString = str_replace('page-numbers', 'page-link', $listString); $listString = str_replace('<li>', '<li class="page-item">', $listString); $listString = str_replace( '<li class="page-item"><span aria-current="page" class="page-link current">', '<li class="page-item active"><span aria-current="page" class="page-link">', $listString ); echo $listString; }
我目前有一个代表多级分层数据的平面列表，我负责服务器中的数据。但是当尝试以垂直图表的方式显示它时，我完全不知所措。 这里...
我正在尝试获得 5 列全宽布局，但我找不到适合我需求的解决方案 这是我使用的代码 &l... 我正在尝试获得 5 列全宽布局，但我找不到适合我需求的解决方案 这是我使用的代码 <!-- Content Section --> <div class="container"> <div class="row"> <div class="col-lg-12" style="border: 1px solid red"> <div class="row"> <div class="col-xs-12"> <div class="col-xs-2 col-xs-offset-1" id="p1">One</div> <div class="col-xs-2" id="p2">Two</div> <div class="col-xs-2" id="p3">Three</div> <div class="col-xs-2" id="p4">Four</div> <div class="col-xs-2" id="p5">Five</div> </div> <!-- //col-lg-12 --> </div> <!-- //row --> lorem </div> </div> <!-- //col-lg-12 --> </div> <!-- //row --> </div> <!-- //container --> 结果我得到 这就是我想要实现的目标。全宽 5 列布局，每列之间有空间 5 列 Bootstrap 4 这里有 5 个相等的全宽列（没有额外的 CSS 或 SASS），使用 自动布局网格.. <div class="container-fluid"> <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> </div> </div> http://codeply.com/go/MJTglTsq9h 这个解决方案之所以有效，是因为 Bootstrap 4 现在是 Flexbox。您可以使用clearfix 中断（例如每 5 列 .row 或 <div class="col-12"></div>）将 5 列包裹在同一个 <div class="w-100"></div> 中。 2020 年更新 从 Bootstrap 4.4 开始，您还可以在 row-cols-5... 上使用 row 类 <div class="container"> <div class="row row-cols-5"> <div class="col"> X </div> <div class="col"> X </div> <div class="col"> X </div> <div class="col"> X </div> <div class="col"> X </div> <div class="col"> X </div> </div> </div> https://codeply.com/p/psJLGuBuc3 更新，2021：对于现代 Bootstrap（4+），我推荐 Zim 的答案，因为它是使用 Bootstrap Flex 类的自然方式 .col-xs-2{ background:#00f; color:#FFF; } .col-half-offset{ margin-left:4.166666667% } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row" style="border: 1px solid red"> <div class="col-xs-2" id="p1">One</div> <div class="col-xs-2 col-half-offset" id="p2">Two</div> <div class="col-xs-2 col-half-offset" id="p3">Three</div> <div class="col-xs-2 col-half-offset" id="p4">Four</div> <div class="col-xs-2 col-half-offset" id="p5">Five</div> <div>lorem</div> </div> </div> 这个应该没问题。 默认引导程序（版本 4.6）网格允许您执行此操作。 您可以将 7, 7 11 列排成一行。 <div class="container"> <div class="row row-cols-5"> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> </div> </div> 此的响应式版本。 <div class="container"> <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-5"> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> </div> </div> 只需将其添加到您的 CSS 中 /* 5 Columns */ .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } .col-xs-15 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; } } 有时我被要求在现有的引导网站中使用一些非常奇怪的网格布局（不要弄乱当前的代码）。我所做的是创建一个单独的 CSS 文件，我可以将其放入当前的引导项目中并使用其中的网格布局样式。以下是 bootstrap-5ths.css 文件包含的内容以及它如何查找 bootstrap 版本 4 的示例。 如果您想在 bootstrap 版本 3 中使用它，只需删除 col-xl-* 样式并将最小宽度从 576px 更改为 768px、768px 更改为 992px、992px 更改为 1200px。 .col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths, .col-xl-5ths, .col-xs-two5ths, .col-sm-two5ths, .col-md-two5ths, .col-lg-two5ths, .col-xl-two5ths, .col-xs-three5ths, .col-sm-three5ths, .col-md-three5ths, .col-lg-three5ths, .col-xl-three5ths, .col-xs-four5ths, .col-sm-four5ths, .col-md-four5ths, .col-lg-four5ths, .col-xl-four5ths, .col-xs-five5ths, .col-sm-five5ths, .col-md-five5ths, .col-lg-five5ths, .col-xl-five5ths, { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } @media (min-width: 576px) { .col-sm-5ths {width: 20%;float: left;} .col-sm-two5ths {width: 40%;float: left;} .col-sm-three5ths {width: 60%;float: left;} .col-sm-four5ths {width: 80%;float: left;} } @media (min-width: 768px) { .col-md-5ths {width: 20%;float: left;} .col-md-two5ths {width: 40%;float: left;} .col-md-three5ths {width: 60%;float: left;} .col-md-four5ths {width: 80%;float: left;} } @media (min-width: 992px) { .col-lg-5ths {width: 20%;float: left;} .col-lg-two5ths {width: 40%;float: left;} .col-lg-three5ths {width: 60%;float: left;} .col-lg-four5ths {width: 80%;float: left;} } @media (min-width: 1200px) { .col-xl-5ths {width: 20%;float: left;} .col-xl-two5ths {width: 40%;float: left;} .col-xl-three5ths {width: 60%;float: left;} .col-xl-four5ths {width: 80%;float: left;} } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-md-5ths">1</div> <div class="col-md-5ths">1</div> <div class="col-md-5ths">1</div> <div class="col-md-5ths">1</div> <div class="col-md-5ths">1</div> </div> <div class="row"> <div class="col-md-5ths">1</div> <div class="col-md-two5ths">2</div> <div class="col-md-two5ths">2</div> </div> <div class="row"> <div class="col-md-three5ths">3</div> <div class="col-md-two5ths">2</div> </div> <div class="row"> <div class="col-md-four5ths">4</div> <div class="col-md-5ths">1</div> </div> <div class="row"> <div class="col-md-five5ths">5</div> </div> </div> <div class="row"> <div class="col">One</div> <div class="col">Two</div> <div class="col">Three</div> <div class="col">Four</div> <div class="col">Five</div> </div> 您可以通过编写媒体查询来自定义您需要的内容。这样我们就可以保持响应式设计 @media(max-width: 425px) { .col { flex-basis: auto; -webkit-box-flex: 1; flex-grow: 1; max-width: 100%; } } @media(min-width: 426px) and (max-width: 961px){ .col { flex-basis: auto; -webkit-box-flex: 1; flex-grow: 1; max-width: 50%; } } 为什么不使用网格？ .container { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-column-gap: 20px } CSS .bg{ background-color: #9DC3E6; border-radius: 10px; color: #fff; padding: 15px; } .col-xs-5-cols, .col-sm-5-cols, .col-md-5-cols, .col-lg-5-cols { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col-xs-5-cols { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-5-cols { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-5-cols { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-5-cols { width: 20%; float: left; } } html <div className="row"> <div className="col-md-5-cols">1<div className="bg"></div></div> <div className="col-md-5-cols">2<div className="bg"></div></div> <div className="col-md-5-cols">3<div className="bg"></div></div> <div className="col-md-5-cols">4<div className="bg"></div></div> <div className="col-md-5-cols">5<div className="bg"></div></div> </div> 如果您想对每行强制使用 20% 的列宽，即使某些行中没有 5 列，您也必须将以下内容添加到 css 或 scss 文件中： .col-xs-5-cols, .col-sm-5-cols, .col-md-5-cols, .col-lg-5-cols { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col-xs-5-cols { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } @media (min-width: 768px) { .col-sm-5-cols { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } } @media (min-width: 992px) { .col-md-5-cols { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } } @media (min-width: 1200px) { .col-lg-5-cols { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } } 并在您的 html 中，使用添加的类，如下所示： <div class="row"> <div class="col-lg-5-cols"></div> <div class="col-lg-5-cols"></div> <div class="col-lg-5-cols"></div> <div class="col-lg-5-cols"></div> <div class="col-lg-5-cols"></div> </div> 将一些 margin-left 放入全绿色 divs 中，但不要放在第一个 查看此页面以获取常规 Boostrap 布局信息 http://getbootstrap.com/css/#grid-offsetting 试试这个： <div class="col-xs-2" id="p1">One</div> <div class="col-xs-3"> <div class="col-xs-8 col-xs-offset-2" id="p2">Two</div> </div> <div class="col-xs-2" id="p3">Three</div> <div class="col-xs-3"> <div class="col-xs-8 col-xs-offset-2" id="p4">Four</div> </div> <div class="col-xs-2" id="p5">Five</div> 我分别将宽度分成5个不均匀的div和col-xs- 2,3,2,3,2。两个 div 和 col-xs-3 的大小是 col-xs-2 div 大小的 1.5 倍，因此列宽需要是 2/3x (1.5 x 2/3 = 1) col-xs-3 宽度以匹配其余部分。 更好，您可以使用任何 div 计数。 .col-xs-2{ background:#00f; color:#FFF; } .col_item { margin-left:4.166666667% } .col_item:first-child, .col_item:nth-child(5n+1) { margin-left: 0; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row" style="border: 1px solid red"> <div class="col-xs-2 col_item" id="p1">One</div> <div class="col-xs-2 col_item" id="p2">Two</div> <div class="col-xs-2 col_item" id="p3">Three</div> <div class="col-xs-2 col_item" id="p4">Four</div> <div class="col-xs-2 col_item" id="p5">Five</div> <div class="col-xs-2 col_item" id="p5">One</div> </div> </div> 诚实地做到这一点的最佳方法是更改列数，而不是试图将 5 变成 12。 您可能使用的最佳数字是 20，因为它可以被 2、4 和 5 整除。 因此，在您的 variables.less 中查找：@grid-columns: 12 并将其更改为 20。 然后将您的 html 更改为： <div class="row"> <div class="col-xs-20"> <div class="col-xs-4" id="p1">One</div> <div class="col-xs-4" id="p2">Two</div> <div class="col-xs-4" id="p3">Three</div> <div class="col-xs-4" id="p4">Four</div> <div class="col-xs-4" id="p5">Five</div> </div> <!-- //col-lg-20 --> </div> 我个人会使用 display: flex 来实现这一点，因为 bootstrap 的设计并不是很适合 5 列分割。 带有引导变量的wearesicc 5 col解决方案的可复制版本： .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; padding-right: ($gutter / 2); padding-left: ($gutter / 2); } .col-xs-15 { width: 20%; float: left; } @media (min-width: $screen-sm) { .col-sm-15 { width: 20%; float: left; } } @media (min-width: $screen-md) { .col-md-15 { width: 20%; float: left; } } @media (min-width: $screen-lg) { .col-lg-15 { width: 20%; float: left; } } 可以在bootstrap3中使用如下： <div class="row"> <div class="col-md-2 col-md-offset-1">One</div> <div class="col-md-2">Two</div> <div class="col-md-2">Three</div> <div class="col-md-2">Four</div> <div class="col-md-2">Five</div> </div> 与其添加边距，为什么不向每个 col-xs-2 添加 1px 的 padding-right，因为 padding 仍然是该 div 的一部分 .col-xs-2 :not(.col-xs-2:nth-child(5)) {padding-right:1px} .col-xs-2{ background:#00f; color:#FFF; } .col-half-offset{ margin-left:4.166666667% } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row" style="border: 1px solid red"> <div class="col-xs-4" id="p1">One</div> <div class="col-xs-4 col-half-offset" id="p2">Two</div> <div class="col-xs-4 col-half-offset" id="p3">Three</div> <div>Test</div> </div> </div> 在 Bootstrap 4 和最新的 Bootstrap 5 中，处理变得更加简单。 5 列布局在大屏幕中将显示 5 个项目，中屏幕中将显示 3 个项目，在小屏幕中将显示 2 个居中对齐的项目。 <div class="row justify-content-center"> <div class="col-sm-6 col-md-4 col-lg">One</div> <div class="col-sm-6 col-md-4 col-lg">Two</div> <div class="col-sm-6 col-md-4 col-lg">Three</div> <div class="col-sm-6 col-md-4 col-lg">Four</div> <div class="col-sm-6 col-md-4 col-lg">Five</div></div> 以下 Bootstrap 5 类对我有用： <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-5 g-3"> <div class="col"> <div class="card"> Item 1 </div> </div> <div class="col"> <div class="card"> Item 1 </div> </div> <div class="col"> <div class="card"> Item 1 </div> </div> <div class="col"> <div class="card"> Item 1 </div> </div> <div class="col"> <div class="card"> Item 1 </div> </div> <div class="col"> <div class="card"> Item 1 </div> </div> <div class="col"> <div class="card"> Item 1 </div> </div> </div> 这是另一种简单的方法，为每个 col-xs-2 添加宽度 20%： <div class="col-xs-12"> <div class="col-xs-2" style="width:20%;" id="p1">One</div> <div class="col-xs-2" style="width:20%;" id="p2">Two</div> <div class="col-xs-2" style="width:20%;" id="p3">Three</div> <div class="col-xs-2" style="width:20%;" id="p4">Four</div> <div class="col-xs-2" style="width:20%;" id="p5">Five</div> </div> 使用偏移怎么样？ <div class="row"> <div class="col-sm-8 offset-sm-2 col-lg-2 offset-lg-1"> 1 </div> <div class="col-sm-8 offset-sm-2 col-lg-2 offset-lg-0"> 2 </div> <div class="col-sm-8 offset-sm-2 col-lg-2 offset-lg-0"> 3 </div> <div class="col-sm-8 offset-sm-2 col-lg-2 offset-lg-0"> 4 </div> <div class="col-sm-8 offset-sm-2 col-lg-2 offset-lg-0"> 5 </div> </div>
我正在尝试构建我在图像中附加的内容，但不幸的是我无法让它正确放置，到目前为止这是我的HTML（我是引导程序的新手） 我正在尝试构建我在图像中附加的内容，但不幸的是我无法让它正确放置，到目前为止这是我的 HTML（我是引导程序的新手） <div class="row"> <div class="container"> <div class="col-lg-3"> </div> <div class="col-lg-6"> <p class="text-center"> <strong>Enter your email and get special information</strong> </p> @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @class = "form-inline col-lg-12" })) { <div class="input-group col-lg-9" style="margin-left: 3%"> <input type="text" class="form-control"> </div> <div class="input-group col-lg-2"> <button class="btn btn-primary">Submit</button> </div> } </div> <div class="col-lg-3"> </div> </div> </div> 本来应该是这样的 但看起来像这样，理想情况下我希望按钮离文本框更近一点 但是当我在移动屏幕上查看它时，我遇到了混乱 如有任何帮助，我们将不胜感激。 这个小提琴怎么样： http://jsfiddle.net/jwyr6Lwh/1/ .custom input.form-control { border: 1px solid #848484; -webkit-border-radius: 30px !important; -moz-border-radius: 30px !important; border-radius: 30px !important; -moz-box-shadow: 2px 2px 1px #666; -webkit-box-shadow: 2px 2px 1px #666; box-shadow: 2px 2px 1px #666; outline:0; padding-left:10px; padding-right:0px; background-color: rgba(255,255,255,0.2); } .custom button { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } 在移动浏览器上显示不同的原因是它的响应能力 class="col-lg-2" 意味着在大型设备上它将显示在两列中，否则一列在另一列下面。如果您不打算这样做，请采取class="col-sg-2"。 这个怎么样？ http://jsfiddle.net/ytn7z6tc/4/ <h3 id="btn-groups-single">Input + Button</h3> <div class="input-group"> <input type="text" class="form-control " placeholder="email address"> <div class="input-group-btn"> <button type="button" class="btn btn-primary"> Submit </button> </div> </div>