CSS：行列边框未显示

Question

我刚刚开始进入网络应用程序开发，我对css / boostrap有疑问。

这是我的模板：

{% extends "layout.html" %}

{% block title %}
    display
{% endblock %}

{% block main %}

<div class="container-fluid">
    <div class="row" style="font-size:150%">
            <div class="col-md-2">Symbol</div>
            <div class="col-md-2">Name</div>
            <div class="col-md-2">Shares</div> 
            <div class="col-md-2">Price</div> 
            <div class="col-md-2">Sum</div>
     </div> 
    {% for elem in p %}
    <div class="row">
            <div class="col-md-2">{{ elem.stock }}</div>
            <div class="col-md-2">{{ elem.name }}</div>
            <div class="col-md-2">{{ elem.shares }}</div> 
            <div class="col-md-2">${{ elem.price }}</div> 
            <div class="col-md-2">${{ elem.total}}</div>
     </div>   
    {% endfor %}

    <div class="row">
        <div class="col-md-2"> TOTAL SPENDED:</div>
        <div class="col-md-offset-6">${{overall_total}}</div>
    </div>
    <div class="row">
        <div class="col-md-2">CASH LEFT:</div>          
        <div class="col-md-offset-6">${{cash_left}}</div>
    </div>
 </div>
{% endblock %}

我正在使用Flask并将不同的值传递给表。问题是，在创建表格时，它没有任何边框或颜色。谁知道我做错了什么？ 谢谢你们。

以下是它的图片：

Answer 1

没有css实际上会为你的行提供边框，我建议在你的div容器中添加这个代码，在任何行之前

<style>
  .row {
    border-bottom: 1px solid #000;
  }
</style>

Answer 2

在我看来，自助式桌子是更好的选择。见http://getbootstrap.com/css/#tables

Answer 3

默认情况下，bootstrap没有向行添加边框。

有两种方式

1. 直接向行添加边框

.row { border-bottom: 1px solid black; } 2.如果你想要更多控制边框

，使用伪类

.row {
   position: relative;
}



.row:after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 1px;
   background: black;
   left: 0;
}

Answer 4

更好地为你的主要div提供背景颜色，并为细胞和背景颜色白色填充1px。

.container-fluid{
   background-color : black ;
}
.container-fluid .col-md-2 {
   padding: 1px;
   background-color: white;
}