如何设置单行四列的引导卡样式

问题描述

在我的角度应用程序中，我创建了引导卡来显示一些信息。

但是它没有达到我期望的设计，我已经尝试了很多方法。

component.html

<div class="bs-example">
    <div class="card" id="dd" style="max-width: 800px;">
        <div class="row no-gutters">
            <div class="col-sm-3" >
                heading-1
            </div>
            <div class="col-sm-3">
                <div>heading-1</div>
 <div class="col-sm-3">
                <div>heading-3</div>

                <div class="card-body">
                    <h5>info-1</h5>
                                        <h5>info-1</h5>

               </div>
            </div>
 </div>
</div>

component.css

body{
background-color: #2d3436;
background-image: linear-gradient(315deg,#2d3436 0%,#000000 74%);
color:white;
}

.bs-example{
        margin: 20px;        
    }

   #dd{
    background-color: #2d3436;
background-image: linear-gradient(315deg,#000000 74%);
color:white;
font-weight: bold;
border-bottom: 1px solid grey;

   }

我要在行中显示数据，将4个标题（heading-1，heading-2 ..）放在一行中 并在每个标题下放置信息，并在其下一行加上边框，并在下一行中将其他信息放置在每个标题下。

有人可以帮助我吗？我是新手。

解决方法

您是否将引导CSS导入到某个地方？您需要执行此操作才能使样式通过。例如，您可以将其导入HTML文件中。像这样：

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">

或将其导入CSS文件中，如下所示：

@import "~bootstrap/dist/css/bootstrap.css"

,

好的，因此您想关闭div标签并将标题包含在其中。你很亲近。

<div class="bs-example">
    <div class="card" id="dd" style="max-width: 800px;">
        <div class="row no-gutters">
            <div class="col-sm-4" >
                heading-1
            </div>
            <div class="col-sm-4">
                <div>heading-1</div>
                </div>
            <div class="col-sm-4">
                <div>heading-3</div>

            </div>
            <div class="card-body">
                <h5>info-1</h5>
                <h5>info-1</h5>

            </div>
        </div>
    </div>
</div>

那个html似乎对我有用。所以这里的区别是我在col类的div之后放置了结束标记。然后我也将col-4而不是3放进去，因为标题中只有3个项目。

,

<div class="bs-example">
<div class="card" id="dd" style="max-width: 800px;">
    <div class="row no-gutters">
        <div class="col-sm-3" >
            <h5>Heading 1</h5>
            <div class="card-body">
                //have some info here
            </div>
        </div>
        <div class="col-sm-3" >
            <h5>Heading 2</h5>
            <div class="card-body">
                //have some info here
            </div>
        </div>
        <div class="col-sm-3" >
            <h5>Heading 3</h5>
            <div class="card-body">
                //have some info here
            </div>
        </div>
        <div class="col-sm-3" >
            <h5>Heading 4</h5>
            <div class="card-body">
                //have some info here
            </div>
        </div>
    </div>
</div>