Установка панели в систему сетки бутстрапов

У меня есть базовая панель начальной загрузки, и я хочу, чтобы она имела ширину в четыре столбца. Я попытался добавить класс col-sm-4, как и любой другой div:

<div class="row">
  <div class="panel panel-default col-sm-4">
    <div class="panel-heading">Panel heading without title</div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
</div>

Это верно для ширины, но теперь фон заголовка перепутался:

panel with messed up header

Как мне заставить его соответствовать этой ширине, но все же правильно отобразить заголовок?

ОТВЕТЫ

Ответ 1

Вместо того, чтобы указывать панель шириной в четыре столбца, что, если вы поместили панель в колонку длиной четыре? Я не вижу нигде в документации, в которой говорится, что вы можете применить класс col-sm- * к компоненту панели.

<div class="row">
  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">Panel content</div>
    </div>
  </div>
</div>

И помните, что столбцы должны содержать до 12. Так что, если вы хотите пустое пространство справа и слева от панели, вы сделаете что-то вроде этого:

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">Panel content</div>
    </div>
  </div>
  <div class="col-md-4"></div>
</div>

Обновление 1: Sionide21 заметил, что ширина столбца изменяется в зависимости от того, есть ли у вас вложенные строки. См. Изображение ниже.

Non-Nested Panel Versus Nested Panel

Верхняя строка изображения - это то, что происходит, когда панель помещается непосредственно внутри столбца (см. первую строку ниже... это то же самое, что и первый фрагмент HTML этого сообщения). Нижняя половина - это то, что происходит, когда вы вставляете вложенную строку (см. Вторую строку ниже).

<div class="row">
  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">Panel content</div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-4 bg-primary"><p>Left Column</p></div>
  <div class="col-md-4">
    <div class="row">
      <div class="panel panel-default">
        <div class="panel-heading">Panel Heading</div>
        <div class="panel-body">Panel content</div>
      </div>
    </div>
  </div>
  <div class="col-md-4 bg-primary"><p>Rightt Column</p></div>
</div>

Итак, кажется, что, когда панель помещается непосредственно внутри столбца, к панели добавляется некоторое поле (или добавление добавляется в столбец), тогда как при помещении панели во вложенную строку маржа (или заполнение). Я не знаю, является ли это по дизайну или просто причудой Bootstrap.

Обновление 2: koala_dev указал, что пример "вложенной строки" ведет себя так, потому что панель является прямым дочерним элементом элемента .row. Таким образом, по сути, мы противодействуем заполнению столбца отрицательными полями строки. Я не знаю достаточно об этом, но он говорит, что должно быть хорошо, чтобы уйти как есть, или вы можете создать собственный CSS для удаления прокладки с панели или даже попытаться добавить класс .row к панели сам! Например. <div class="panel panel-default row">.

Ответ 2

Попробуйте добавить width:100% в .panel-heading