我有一個帶有標題的剃須刀頁面。標頭是一個組件 PageHeader.razor。我試著讓它做出回應。但是當我以回應模式顯示它時，文本和影像相互重疊。
我錯了什么？
帶有頁眉的頁面：
<div class="row myheader">
@{
string title = "This is a title";
string subtitle = "This is a subtitle";
<PageHeader Title=@title Subtitle=@subtitle />
}
</div>
...和標題：
<div class="d-flex align-items-center">
<div class="col-2 me-0">
@{
string url = $"/images/trofee.png";
<img src=@url class="rounded float-start image-responsive" height="256" width="256" />
}
</div>
<div class="col-10 ms-0 rounded mb-3 align-self-end text-start">
<div class="row mytitleheader">
<h2><span>@Title</span></h2>
</div>
<div class="row mysubtitleheader">
<span>@Subtitle</span>
</div>
</div>
</div>
@code {
[Parameter] public string Title { get; set; } = string.Empty;
[Parameter] public string Subtitle { get; set; } = string.Empty;
[Parameter] public string ImageType { get; set; } = string.Empty;
}
...和CSS：
.myheader {
background: -webkit-linear-gradient(left, yellow, orange); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, yellow, orange); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, yellow, orange); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, yellow, orange); /* Standard syntax (must be last) */
box-shadow: 10px 10px 5px black;
margin: 4px 7px 25px 4px;
}
.mytitleheader {
color: red;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-weight: bolder;
font-style: italic;
}
.mysubtitleheader {
font-style: italic;
color: blue;
font-size: 1.5rem;
}
大小視圖的例子：
和：
uj5u.com熱心網友回復：
這是因為您col-2為imgparent 設定并且它設定了width:16.666%. 如果您希望img父級為 256x256，只需將其洗掉。
<div class="me-0">
@{
string url = $"/images/trofee.png";
<img src=@url class="rounded float-start image-responsive" height="256" width="256" />
}
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/512276.html