如何使用 bootstrap 3 边框类创建边框答案

【问题标题】：how to create borders with bootstrap 3 border class如何使用 bootstrap 3 边框类创建边框
【发布时间】：2017-11-09 16:38:19
【问题描述】：

我使用bootstrap的类border-*，但是看不到边框。 1.我错过了什么？ 2.我在哪里改变边框的厚度？ 3. 为什么下面代码的输出结果中，单元格之间有一个小白点？ 4. 我使用了rounded-0类，它仍然存在，为什么？

感谢任何帮助。

div {
height: 50px;
}

    <!-- Jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- BootStrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!-------------------------------------------------------------------------->
    <div class="container-fluid row">
      <h1 class = 'page-header'>
      Why the borders are not visible ?
      </h1>
      <h5>And why the radius box is still rounded if the class is rounded-0 ?</h5>
    		<div class='btn btn-primary rounded-0 col-xs-4'></div>
    		<div class='btn btn-primary rounded-0 col-xs-4 border-top-0'></div>
    		<div class='btn btn-primary rounded-0 col-xs-4 '></div>
    		<div class='btn btn-primary rounded-0 col-xs-4 border-left-0'></div>
    		<div class='btn btn-primary rounded-0 col-xs-4 '></div>
    		<div class='btn btn-primary rounded-0 col-xs-4  border-right-0'></div>
    		<div class='btn btn-primary rounded-0 col-xs-4'></div>
    		<div class='btn btn-primary rounded-0 col-xs-4 border-bottom-0'></div>
    		<div class='btn btn-primary rounded-0 col-xs-4'></div>
    	</div>

【问题讨论】：

没有“Bootstrap 3边框类”这样的东西。他们是在v4 中介绍的。
可以查看所有v3变量here,

标签： twitter-bootstrap border rounded-corners

【解决方案1】：

我刚刚在文件 Bootstrap.css 中查看了 'border-top-0'、'border-right-0' ... 这些类在 Bootstrap 中没有给出，尽管它是用 Bootstrap 文档编写的。但也许你可以自己创建这些类。

例如：

.border-top-0{
    border-style: solid;
    border-top: none;
}

并设置边框宽度：border-width: 1px;

【讨论】：

坦克，但我尝试了解引导程序的使用。它似乎表明我自己使用引导类更容易做很多事情。如果有这样一个类，它的使用方法是什么？
我不确定我是否理解你的问题。您想知道如何使用引导类来获得结果吗？
是的。我正在尝试了解如何使用引导类“border-*”

【解决方案2】：

您正在查看的文档似乎是 4.0+ 版本，但您的示例中包含的引导程序版本是 3.3.7。这些实用程序类型在版本 3 中不可用。如果您要升级您的参考，您将能够使用这些实用程序。

这似乎是您正在使用的文档：https://getbootstrap.com/docs/4.0/utilities/borders/

这是您的版本的文档：https://getbootstrap.com/docs/3.3/components/

【讨论】：