1. дома
  2. Вопрос и ответ
  3. CSS: границы строк-столбцов не отображаются

CSS: границы строк-столбцов не отображаются

2017-01-20 3 views
0

Я только начал заниматься разработкой веб-приложений, и у меня есть вопрос о css/boostrap.CSS: границы строк-столбцов не отображаются

Это мой шаблон:

{% 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 %}

Я использую флягу и передавая различные значения в таблицу. Проблема в том, что при создании моей таблицы у нее нет границ или цветов. Кто-нибудь знает, что я делаю неправильно? Спасибо, ребята.

Вот картина этого:

enter image description here

источник

2017-01-20 tadm123

+1

Вы должны смотреть в

тег, который есть для таблиц. –

ответ

4

Там нет CSS, которые фактически дают границы для ваших строк, я хотел бы предложить, чтобы добавить этот код в ваш сНу контейнере до любой строки

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

источник

2017-01-20 07:36:00 Kejt

0

лучше дать цвет фона вам главный div и дать дополнение 1px для клеток и цвет фона белый.

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

источник

2017-01-20 07:42:12 jithya

1

По умолчанию 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; 
}

источник

2017-01-20 07:49:04

Смежные вопросы

 Смежные вопросы