问题描述
我将Bootstrap 4.x
与asp.net mvc
一起使用。我尝试将横幅广告分为三列,但无法在图标列中一路扩展背景色。
这是我的代码:
查看
<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;
}
}
解决方法
您需要改成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
,就这样:
<!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/
,为了使.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;
}
}