Question

这是我第一次建立一个自助网站。我以为我知道列是如何工作的，但是当我尝试使用它们时，它们占据容器的100％宽度（而不是占据容器的1/4）。我已经尝试使用谷歌搜索同样问题的人但却找不到任何东西。所以，这就是我所拥有的......

HTML：

<body>
    <div class = "hero container"></div>
    <div class = "container-fluid how-it-works">
        <div class = "row">
            <div class = "col-md-3"></div>
            <div class = "col-md-3"></div>
            <div class = "col-md-3"></div>
            <div class = "col-md-3"></div>
        </div>
    </div>
    <div class = "featured container"></div>
    <div class = "testimonials container"></div>
    <div class = "about container"></div>
</body>

CSS：

.how-it-works {
    height:  550px;
    background-color:  #f7f7f7;
}

.how-it-works .row .col-md-3 {
    height:  550px;
    background-color:  blue;
    width: 100%;
}

如果有人能弄清楚我做错了什么，我真的很感激一些帮助。谢谢！

Answer 1

删除以下CSS（在bootstrap列上设置宽度）：

#ifndef __Foo_H__
#define __Foo_H__

template <class T>
class Foobar{

  private:
    bool foo1(T);
    bool foo2(T);

  public:
   FooBar();

};

template <class T> bool FooBar<T>::foo1(T data){
 code..
}

template <class T> bool FooBar<T>::foo2(T data){
 code..
}

#endif

例如col-md-3定义为：

.how-it-works .row .col-md-3 {
    width: 100%;
}

并且您的代码会更改。移除它，它将再次占用1/4的空间。

Answer 2

.col-md-3的宽度已由bootstrap设置，因此您将使用css覆盖它。你可以在这里查看它的工作原理：http://getbootstrap.com/css/#grid

bootstrap列全宽并溢出容器外

2 个答案: