Bootstrap Grid System 在我的网站上不起作用

Posted 2023-03-06

【中文标题】Bootstrap Grid System 在我的网站上不起作用

【英文标题】：Bootstrap Grid System is not working in my website

【发布时间】：2016-12-19 21:56:25

【问题描述】：

引导网格间距无法正常工作。

【问题讨论】：

twitter bootstrap grid system. Spacing between columns的可能重复

这不是重复谢谢

您应该阅读那里的答案，因为您的问题的解决方案以多种方式提供。只是不适用于您的特定尺寸，您应该能够从其中几个中确定。包括具有 90 个赞成票的列嵌套。

我已阅读所有答案

【参考方案1】：

<div class="row">
   <div style="padding-right:15px" class="col-lg-4"></div>
   <div style="padding-right:15px" class="col-lg-4"></div>
   <div class="col-lg-4"></div>
 </div>

【参考方案2】：

您可以在 bootstrap less 文件中编辑这些空间并重新编译它。就在 variables.less 中

//== Grid system
//
//## Define your custom responsive grid.

//** Number of columns in the grid.
@grid-columns:              12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:         30px;

在css中制作：

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, 
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;