时间戳

首页 > 解决方案 > 我想使用 bootstrap4 在列顶部添加 10 px 边框

html - 我想使用 bootstrap4 在列顶部添加 10 px 边框

问题描述

我想在我的专栏顶部添加一个边框。我正在尝试使用引导程序 4，但我无法弄清楚。我正在使用<div>标签来制作列，这是我的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Untitled Document</title>
<style type="text/css">
	
</style>
</head>

<body>
<div class="row">
<div class="col-lg2, col-md-2, col-sm-2, col-xs-2" style="background: #efefd8; min-height:77px;">
			<h4><b><center>
COL 1
            </center></b></h4>
		</div>
		<div class="col-lg2, col-md-2, col-sm-2, col-xs-2" style="background: #efefd8; min-height:77px;">
			<h4><b><center>
COL 2
            </center></b></h4>
		</div>
		<div class="col-lg-2, col-md-2, col-sm-2, col-xs-2" style="background:#efefd8; min-height:77px;">
			<h4><b><center>
COL 3
            </center></b></h4>
		</div> 
		<div class="col-lg-2, col-md-2, col-sm-2, col-xs-2" style="background: #efefd8; min-height:77px;">
		<h4><b><center>
COL 4
        </center></b></h4>
		</div>
		<div class="col-lg-2, col-md-2, col-sm-2, col-xs-2">
		</div>
	</div>
</body>
</html>

标签： htmlcssbootstrap-4

解决方案

从列类中删除逗号：

<div class="col-lg2 col-md-2 col-sm-2 col-xs-2" style="background: #efefd8; min-height:77px;">

使用“文本中心”类将文本与中心对齐。

您可以通过向“border-top”等列添加自定义类来添加边框顶部

然后在你的css文件中：

.border-top {
    border-top: 1px solid black;
}

其他需要注意的事情，您应该制作一个外部样式表，而不是在样式标签中内联您的样式，当您构建整个网站时，这将变得非常难以管理，css 的重点是让选择器匹配您网站上的多个元素并在整个网站上应用相同的一致样式。我强烈建议您参加 CSS 的免费课程，该课程可以在互联网上找到，也可以参加付费课程。

推荐阅读