gpt4 book ai didi

css - 在同一列内 Bootstrap 不同大小

转载 作者:太空宇宙 更新时间:2023-11-04 03:15:30 26 4
gpt4 key购买 nike

我正在尝试制作一个标题,将其自身附加到 Bootstrap 中的 ListView 。然而,标题不会延伸到 ListView ,即使它们在同一列中。

我希望标题尽可能延伸到列表,CSS 中肯定缺少某些内容。

我的代码:

<div class="row">
<div class="col-sm-5 col-md-5 col-lg-5" style="margin-left:40px">
<div class="heading-surround-default-custom">
<div>
<asp:Label ID="LabelTitel" runat="server" CssClass="heading-default-custom" Text="Titel"></asp:Label>
</div>
</div>
<div class="list-group">
<asp:ListView ID="ListViewWebsite" runat="server" DataKeyNames="WebsiteID" ClientIDMode="AutoID">
<ItemTemplate>
<tr>
<td>
//List code
</td>
</tr>
</ItemTemplate>
</asp:ListView>
</div>
</div>
</div>

代码中使用的自定义 CSS:

.heading-default-custom {
color:#FFF;
margin-left: 10px;
font-weight:200;
font-weight:bold;
font-size:20px;
}
.heading-surround-default-custom {
background-color:#FF6600;
}

很抱歉混合了样式、CSS 和糟糕的格式。反复试验和错误的结果。很确定我错过了一些非常简单的东西。

最佳答案

您可以使用 Bootstrap 的内置 panel 类来帮助您(docs)。

Bootply 示例:http://www.bootply.com/mT5mVxVpOT

HTML:

<div class="panel panel-custom">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Panel content 1</li>
<li>Panel content 2</li>
<li>Panel content 3</li>
</ul>
</div>
</div>

然后添加您的 CSS 以调整颜色等。

.panel-custom .panel-heading {
color:#FFF;
font-weight:200;
font-weight:bold;
font-size:20px;
background-color:#FF6600;
border-radius: 0;
}

.panel-custom .panel-body{
background-color: #eee;
}

关于css - 在同一列内 Bootstrap 不同大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28760913/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com