如何在引导程序中创建两色横幅答案

【问题标题】：How to create a two tone banner in bootstrap如何在引导程序中创建两色横幅
【发布时间】：2021-02-16 07:40:53
【问题描述】：

我正在尝试创建一个具有与此类似的两色调蓝色的横幅：

我正在使用Bootstrap 4.x 和asp.net mvc。我尝试将横幅分成 3 列，但无法在图标列中一直展开背景颜色。

这是我目前的样子：

这是我的代码：

查看

<div class="row alert-banner-row">
        <div class="col-sm-2 icon-column">
            <i class="fas fa-3x @Model.Icon1 fa-inverse"></i>
        </div>
        <div class="col-sm-8 body-column">
            <h5>@Model.Title</h5>
            <p>@Model.Content</p>
        </div>
        <div class="col-sm-2 button-column">
            @if (Model.ButtonUrl.EndsWith(".pdf"))
            {
                <a class="ctaBanner-cta button button--white" target="_blank" href="@Model.ButtonUrl">@Model.ButtonLabel</a>
            }
            else
            {
                <a class="ctaBanner-cta button button--white" href="@Model.ButtonUrl">@Model.ButtonLabel</a>
            }
        </div>
    </div>

SCSS

.alert-banner-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.5rem;
    border-radius: 1rem;
    background-color: #004089;

    .body-column {
        padding-top: 10px;
        font-family: 'Roboto', sans-serif;
        margin: 0rem;
        color: white;
    }

    .icon-column {
        background-color: #00336D;
    }
}

我怎样才能编辑我目前必须使它看起来像第一个屏幕截图？

【问题讨论】：

标签： asp.net-mvc bootstrap-4 sass

【解决方案1】：

为了使您的.icon-column 具有较暗的背景，其父级.alert-banner-row 不能有任何填充。否则会显示差距：

<div class="row alert-banner-row">
    <div class="col-sm-2 icon-column">
        <i />
    </div>
    <div class="col-sm-8 body-column">
        <h5 />
        <p />
    </div>
    <div class="col-sm-2 button-column">
        <a />
    </div>
</div>

要显示左角，您需要指定overflow:hidden; 否则它不会显示，因为它被溢出内容覆盖。

.alert-banner-row {
    background-color: #004089;
    border-radius: 1rem;
    color: #fff;
    overflow: hidden;

    .body-column {
        padding-top: 1rem;
        padding-bottom: 1rem;
        font-family: 'Roboto', sans-serif;
    }

    .icon-column,
    .button-column {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
    }

    .icon-column {
        background-color: #00336D;
    }
}

演示： https://jsfiddle.net/davidliang2008/krdu6wjc/53/

【讨论】：

【解决方案2】：

您需要改为使用display:flex 和align-items: center 列...

.alert-banner-row {
    display: flex;
    padding: 0.5rem;
    border-radius: 1rem;
    background-color: #004089;

    .body-column {
        padding-top: 10px;
        font-family: 'Roboto', sans-serif;
        margin: 0rem;
        color: white;
        align-self: center;
    }

    .icon-column {
        background-color: #00336D;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .button-column {
        align-self: center;
    }
}

https://codeply.com/p/wJMhKZ7P7y

【讨论】：

在您的代码层中，图标的背景没有完全填满。图标 div 和主行 div 之间有一些间距
我不明白你的意思。请澄清问题。如果您的意思是第一列太宽，则将其设为 col-sm-1 而不是 col-sm-2

【解决方案3】：

就是这样：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-11/css/all.min.css">

    <title>Title</title>
</head>

<body>
    <div class="container">
        <div class="row" style="height:100px;color: white;">
            <div class="col-2" style="background-color: #00336D;">
                <div style="text-align: center; position: relative; top:40%;">
                    <i class=" fa fa-exclamation-circle "></i>
                </div>
            </div>
            <div class=" col-8 " style=" background-color: #004089;padding: 2%; ">
                <h1><b>Creative Writing</b></h1>
                Generating random paragraphs can be an excellent way for writers to get their creative flow going at the beginning of the day. The writer has no idea what topic the random paragraph will be about when it appears. This forces the writer to use creativity
                to complete one of three common writing challenges. The writer can use the paragraph as the first one of a short story and build upon it.
            </div>
            <div class=" col-2 " style=" background-color: #004089; " ">
                    <button type=" button " class=" btn btn-primary align-content-center " style=" background-color: white; color:#00336D ;position:relative;top:30% "><b>Click Here</b></button>
                </div>
            </div>
        </div>
        <script src=" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js "></script>
        <script src=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js "></script>
</body>

</html>

检查一下： https://jsfiddle.net/s9qmj1fn/

【讨论】：