使用bootstrap

Question

我一直试图让我的网格填充它所包含的面板，但我遇到了问题。我想要两个div代表面板主体中的网格来填充作为面板主体的父级。以下是标记：

<div class="container">
    <div class="row">
        <div class="col-md-8 col-lg-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Welcome</div>

                <div class="panel-body" id="app">


                    <div class="row">


                        <div class=" col-lg-4 col-lg-4">

                            <ul class="list-group">
                                <li class="list-group-item" v-for="li in list">
                                </li>
                            </ul>


                        </div>


                        <div class="col-md-8 col-lg-8 ">

                            <ul class="list-group">
                                <li class="list-group-item" v-for="li in list"> {{ li.body }}
                                </li>
                            </ul>

                        </div>


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

Answer 1

Bootstrap列自动包含左右填充。您可以通过向列添加类来删除它，如Julien Melissas所做的那样。

http://julienmelissas.com/no-gutter-column-trick-for-bootstrap/

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}

将这些类添加到您的css文件中，您可以在行中添加no-gutters类。

这是一支笔，展示它是如何运作的。

http://codepen.io/mutualdesigns/pen/jAXRKm

如果要删除面板内部行左侧和右侧的空格，您需要以类似的方式覆盖该元素的填充。