Ответ 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 заметил, что ширина столбца изменяется в зависимости от того, есть ли у вас вложенные строки. См. Изображение ниже.
Верхняя строка изображения - это то, что происходит, когда панель помещается непосредственно внутри столбца (см. первую строку ниже... это то же самое, что и первый фрагмент 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">.