时间戳

首页 > 解决方案 > 如何创建没有文本的 3 色列？

html - 如何创建没有文本的 3 色列？

问题描述

我正在尝试使用没有文本的引导程序创建一个 3 色列。

我已经使用我想要选择的颜色创建了列，但是如何在不丢失列的情况下删除文本？当我直接删除文本时，列缩小了。

<div class="row">
<div class="col-xs-4" style="background-color:#ACE0F8;">.col-sm- 
4</div>
<div class="col-xs-4" style="background-color:#9487BF;">.col-sm- 
4</div>
<div class="col-xs-4" style="background-color:#5C7795;">.col-sm- 
4</div>
</div>`

标签： htmlcssbootstrap-4

解决方案

使用 CSS。

添加一些类，然后设置它们的样式。

.row {
  margin: 0 !important; /* because it renders off screen w bootstrap */
}

.row .ccol {
  min-height: 16px;
}

.c1 {
  background: #ACE0F8;
}

.c2 {
  background: #9487BF;
}

.c3 {
  background: #5C7795;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-4 ccol c1"></div>
  <div class="col-4 ccol c2"></div>
  <div class="col-4 ccol c3"></div>
</div>

推荐阅读