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

【问题标题】：How to style the bootstrap cards with single row and four columns on it如何为单行四列的引导卡设置样式
【发布时间】：2020-12-26 14:04:30
【问题描述】：

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

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

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 个标题（heading-1，heading-2..）放在单行中并在每个标题下放置信息和一条带边框的信息，并在下一行中将其他信息放置在每个标题下。

有人可以帮我解决这个问题吗？我是新手。

【问题讨论】：

标签： css angular twitter-bootstrap bootstrap-4

【解决方案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>

【讨论】：

Thanks@F Klng 这对我来说绝对有用。现在我想将标题（headings-1,2,3..）作为标签（链接）。当我们点击那个特定的选项卡数据（即信息）将像 info1.1、info 1.2、info 1.3 等（必须像上面一样水平）如果标题另一个数据信息它必须来自另一张卡片（在上面的卡片之后），如 info 1.11， info 1.12 等（其他标题也一样）你能帮我吗？
如果我提供的答案适用于您最初的问题，请将其标记为正确答案。我没有完全得到第二个问题

【解决方案2】：

您是否在某处导入引导 CSS？您需要这样做才能使样式通过。例如，您可以将其导入您的 HTML 文件中。像这样：

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

或者像这样在你的 CSS 文件中导入它：

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

【讨论】：

是的，我已经在我的应用程序中包含了引导程序，尽管我遇到了这个问题，你能帮我解决这个问题吗？

【解决方案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 似乎对我有用。所以这里的区别是我在带有 col 类的 div 之后放置了一个结束标记。然后我也放了 col-4 而不是 3，因为标题中只有 3 个项目。

【讨论】：