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

Question

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

但它不是达到我所期望的设计，我已经尝试了许多方法。

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, #2d3436 0%, #000000 74%);
color:white;
font-weight: bold;
border-bottom: 1px solid grey;

   }

我想在行中显示数据，将4个标题(标题-1，标题-2.)在单行和每个标题下，将信息和一行放在边框下，在下一行中，在每个标题下放置其他信息。

有人能帮我解决这个问题吗?我是新来的。

Answer 1

<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>

Answer 2

您在某个地方导入引导CSS吗？您需要这样做，以使样式通过。例如，您可以在HTML文件中导入它。就像这样：

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

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

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

Answer 3

好的，所以你想关闭你的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似乎对我有用。这里的不同之处是，我在div之后加上了一个结束标记，并加上了col类。然后，我也把-4而不是3，因为你只有3个项目在标题中。