Question

如何使用bootstrap和css将列粘在一起？

我想创建这样的东西：

我创造了什么：

这是我的HTML＆amp; CSS标记：

.box1 {
    background: red;
}

.box2{
    background: green;
}

.box3 {
    background: yellow;
}

我的css

template<typename T>
class Matrix
{
private:
    std::vector<T> grid;
    size_t _cols, _rows;

public:
    Matrix(const size_t& cols, const size_t& rows) : 
        _cols(cols), _rows(rows), grid(cols*rows);
    {
    }

    T& at(const size_t& col, const size_t& row)
    {
        return grid[col + row * _cols];
    }
}

每一个帮助都会受到赞赏！

Answer 1

根据你想要达到的目标，有很多种可能性。

如果您想删除设计中所有列之间的间隙（称为装订线），您可以在http://getbootstrap.com/customize/#grid-system自定义自己的引导程序，您将看到变量＆＃34; @ grid-gutter -width＆＃34;需要设置为0。

如果你想要一些内容跨越排水沟，那么他们可以触摸相邻的元素，使用一个类来否定排水沟。像

这样的东西

.no-pad{
    padding-left:0;
    padding-right:0;
}

并将其添加到您想要的所有列中，而不需要装订线。

如果您希望触摸背景颜色，但仍然可以为文本保留一个漂亮的列，则只需在列本身上应用背景样式即可。

Answer 2

实现后续结果的唯一方法是从Bootstraps列类中删除填充，如下所示：

.col-md-4 {
   padding: 0;
}

但是，上面的代码将删除HTML中所有col-md-4列类的填充。最佳做法是添加一个唯一的类/ ID并以这种方式定位列，如下所示：

<div class="myClass">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4 ">
                <div class="box1">
                <h1>this is box 1 one</h1>
                </div>
            </div>

            <div class="col-md-4 ">
                <div class="box2">
                <h1>this is box 1 one</h1>
                </div>
            </div>

            <div class="col-md-4 ">
                <div class="box3">
                <h1>this is box 1 one</h1>
                </div>
            </div>

        </div>
    </div>
</div>

.myClass .row .col-md-4 { 
   padding: 0;
}

这样您只会定位特定代码，而不是所有列。

Answer 3

Bootstraps网格系统为每列添加“装订线”或填充。这是你要覆盖的。但是，如果您只是将padding:0px;应用于.col-md-4，则会从.col-md-4的所有实例中删除不太可能的填充。

解决这个问题的方法是给“行”容器一个类，然后你可以只定位该类中.col-md-4的实例。在此示例中，我已将类boxes添加到该行。然后在我使用的CSS中：

.boxes .col-md-4 {
  padding-right: 0;
  padding-left: 0;
}

这样，我的填充更改仅限于col-md-4类的boxes个类。

我希望有所帮助。

工作示例，但使用col-xs-4更小的视口：

.row {
  background: #ccc;
}
.box {
  height: 100px;
  margin-bottom: 20px;
  overflow: hidden;
}
.boxes .col-xs-4 {
  padding-right: 0;
  padding-left: 0;
}
.box1 {
  background: red;
}
.box2 {
  background: green;
}
.box3 {
  background: yellow;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row boxes">
    <div class="col-xs-4">
      <div class="box box1">
        <h1>this is box 1</h1>
      </div>
    </div>

    <div class="col-xs-4 ">
      <div class="box box2">
        <h1>this is box 2</h1>
      </div>
    </div>

    <div class="col-xs-4 ">
      <div class="box box3">
        <h1>this is box 3</h1>
      </div>
    </div>

Answer 4

在不违反任何引导规范的情况下，已经回答了最佳解决方案。 Here is the Solution

如何将自举盒粘在一起？

4 个答案: