Twitter Bootstrap 3删除行和col-12上的RIGHT边距和填充 [英] Twitter Bootstrap 3 Removing RIGHT margin and padding on a row and col-12

问题描述

我在我的Asp.Net MVC 5项目中使用Twitter Bootstrap 3.0 LESS源代码。我使用顶部导航栏（如此处所示），然后在布局页面中少了几行。

我使用以下行来获取100％的页面宽度：

 < div class = row> 
< div class =col-md-12> 
 //更多HTML代码
< / div> 
< / div> 
  

但这会在每行的右侧添加一个额外的填充。这也为页面添加了一个水平滚动条，并且当​​向右滚动页面时，整个页面的空白垂直水槽可见。

删除所有col-md-12的每行和右上方的margin-right会更正布局。但是，我不觉得这是正确的方法。

任何想法如何删除那些不必要的边距和填充在右边一次，在整个结果您的问题是由于不包装您的 .row

请尝试以下操作：

 < div class =containerstyle =width：100％; background-color：blue;> 
< div class =rowstyle =background-color：green;> 
< div class =col-md-12style =background-color：red;> 
< div style =background-color：yellow;>测试测试测试< / div> 
< / div> 
< / div> 
< / div> 
  

width：100％; .container 将使行100％（红色）。仍然会在您的内容（黄色）周围的填充。此填充是网格的格子，请参阅： http://stackoverflow.com/a/19044326/1596547 p>

不，这没有帮助。 col-md-12上的填充右边仍然存在。
我在任何列中寻找在.less源代码中实现的通用类型
类型（col - * - 12）！

col - * - * 两边都有一个15px的填充。除了 * - 12 类之间没有浮点数， * - 12 。

css / less选择器，用于所有 col - * 类：

  [class ^ =col-] {
 padding-left：0; 
 padding-right：0; 
} 
  

css / less选择器为所有 col- * -12 课程：

  [class $ = -  12] 
 {
 padding-left：0; 
 padding-right：0; 
} 
  

I'm using Twitter Bootstrap 3.0 LESS source in my Asp.Net MVC 5 project. I use a Top Navbar (as given here) and then few more rows in the the layout page.

I use following for rows to take 100% page width:

<div class="row">
    <div class="col-md-12">
        // More HTML code
    </div>
</div>

But this adds an extra padding on the right of each row. This also adds a horizontal scrollbar to the page and a blank vertical gutter throughout the page is visible when scrolled the page to its right.

Removing margin-right on each row and padding-right on all col-md-12 corrects the layout. However, I don't feel this is the correct way to do it.

Any idea how to remove those unnecessary margin and padding on right once for all, throughout the resultant bootstrap.css?

解决方案

Your problem is caused by NOT wrapping your .rows in a .container class.

Try this:

<div class="container" style="width:100%;background-color:blue;">
<div class="row" style="background-color:green;">
    <div class="col-md-12" style="background-color:red;">
       <div style="background-color:yellow;">test test test</div>
    </div>
</div>
</div>

The width:100%; on your .container will make the rows 100% (red). The will still be a padding around your content (yellow). This padding is the gutter of the grid, see: http://stackoverflow.com/a/19044326/1596547

No, this does not help. The padding-right on col-md-12 still prevails. I seek something generic implemented in .less source for any column type (col-*-12)!

All col-*-* have a padding of 15px on both sides. There is no difference between the *-12 classes except from the *-12 classes don't have a float left.

css / less selector for all your col-* classes:

[class^="col-"] {
  padding-left: 0;
  padding-right: 0;
}

css / less selector for all your col-*-12 classes:

[class$="-12"]
{
  padding-left: 0;
  padding-right: 0;
}

这篇关于Twitter Bootstrap 3删除行和col-12上的RIGHT边距和填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！