Question

我正在尝试在bootstrap 3中开发自己的“卡片”模板。如果我有一个标题，那么我希望它有一个底部边框。如果我覆盖由bootstraps行类设置的margin-left和margin-right，则此方法有效。

但是当使用列时尝试使用border-right（或border-left）时，我无法将边框一直移到顶部和底部。我尝试抵消填充，但这使它看起来非常糟糕。

在我的示例中查看bootply中的中间卡：http://www.bootply.com/NX5942x2KC

以下是代码：

<div class="container">
    <div class="card">
        <div class="row card-content-container">
            <div class="col-xs-4 card-left">
                <div class="row">
                    <div class="col-xs-12 text-center">
                        <span>Left Side</span>
                    </div>
                </div>
            </div>
            <div class="col-xs-8 card-right">
                <span>Right side</span>
            </div>
        </div>
    </div>
</div>

和css：

body {
    background-color: #E6E6E6;
}

.container {
    padding-top: 10px;
}

.card {
    background-color: white;
    border: 1px solid black;
    border-radius: 5px;
    margin-bottom: 5px;
}

.card-header-top {
    border-bottom: 1px solid black;
    margin-left: 0px;
    margin-right: 0px;
  }

.card-content-container {
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: 0;
    margin-right: 0;
}

.card-left {
    border-right: 1px solid black;
  }

如何使我的右边界，“左侧”栏一直到顶部和底部，以便触及卡片边框？

Answer 1

从.card-content-container移除填充，然后将其添加到card-left和card-right。

.card-content-container {
   /* padding-top: 5px;
    padding-bottom: 5px;*/
    margin-left: 0;
    margin-right: 0;
}
.card-content-container > div{
  padding:5px;
 }

请参阅此更新Bootply。

Answer 2

您的.card-content-container课程的上限和下限为5px。底部。

我建议在这里删除填充：

.card-content-container {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-left: 0;
    margin-right: 0;
}

并添加此样式：

.card-content-container>div {
    padding-top: 5px;
    padding-bottom: 5px;
}

Updated bootply

边框到达bootstrap列的顶部和底部

2 个答案: