Bootstrap разных размеров внутри той же колонки

Question

Я пытаюсь сделать заголовок, который привязывает его к моему списку в бутстрапе. Однако заголовок не распространяется на список, хотя они находятся в одном столбце.

Я хочу, чтобы название расширялось до списка, должно быть что-то, что мне не хватает в 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

Вы можете использовать Bootstrap's in 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; 
}