Question

我想在列的顶部添加边框。我正在尝试使用bootstrap 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>

Answer 1

从列类中删除逗号：

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

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

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

然后在你的css文件中：

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

其他注意事项，你应该制作一个外部样式表，而不是在样式标签中内联你的样式，当你构建一个完整的网站时，这将成为超级无法管理的，css的重点是拥有匹配多个元素的选择器在您的网站上，并在整个网站上应用相同的一致样式。我强烈建议你参加一个关于CSS的免费课程，可以在互联网上找到或者参加付费课程。

我想使用bootstrap4在我的列顶部添加一个10像素的边框

1 个答案: