Question

我试图在bootstrap中创建一个自我附加到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和糟糕的格式。重复试错的结果。我很确定我错过了一些非常简单的东西。

Answer 1

您可以使用panel类内置的Bootstrap来帮助您（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;
}

在同一列内引导不同的大小

1 个答案: