html - Bootstrap 4 边框类不适用于顶部,对

标签 html css bootstrap-4

我正在尝试使用 bootstrap 4 边框为 div 提供边框。只有边框属性看起来很奇怪,而其他属性没有边框显示。请在下面找到代码片段。

我也尝试过 beta 2 版本。

如果我遗漏了什么,请告诉我。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>

<body>
    <!-- Just created a contianer to test the border class -->
    <div class="container">
        <div class="text-center">
            <h1> Testing bootstrap 4</h1>
        </div>
        <div class="row mt-2">
            <div class="col-12">
                <!-- Testing span with class border -->
                <span class="border">
                <div class="text-primary">Testing Bootsrap 4 Border </div>
            </span>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-12">
                <span class="border-0">Testing Bootsrap 4 Border 0</span>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-12">
                <span class="border-top-0">Testing Bootsrap 4 Border top 0</span>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-12">
                <span class="border-right-0">Testing Bootsrap 4 Border right 0</span>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-sm-12">
                <span class="border border-light">testing border light</span>
            </div>
            <div class="col-sm-12"> col 2</div>
        </div>
    </div>
</body>

</html>

最佳答案

要使 bootstrap 边框正常工作,您必须添加 border类(class)。例如,当您写 <span class="border-right-0"> 时它表明右边不应有任何边界。您还没有声明开始的边界,因此不会显示任何边界。您需要做的是<span class="border border-right-0"> .

关于html - Bootstrap 4 边框类不适用于顶部,对,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47102755/

相关文章:

java - 是否可以在 Android native 应用程序中使用 HTML?

html - IE中的两个背景图像

html - 可以从基础调用页眉和页脚吗?

css - 限制按钮的可点击区域

html - Bootstrap 4 下拉菜单 translate3d() 位置不正确

css - Bootstrap 4 : Table using the whole width but still using table-responsive

javascript - 将 div 附加到 td

javascript - HTML5历史API : window.history.back()丢失history.state

css - 如何使用CSS在图片中心设置一个半圆?

html - 在 bootstrap 中布局 div