Bootstrap заказного содержание

Question

Я пытаюсь получить пользовательский контент в загрузчике, чтобы посмотреть, как этот

Однако, DIV, который держит черный фон с переполнением родительского DIV.

Вот код:

<div class="thumbnail shadow"> 
       <div class="row"> 
        <div class="col-sm-12 col-md-12 col-lg-12" style="background-color:black"> 
         <h3 style="color: white">Purchase Order</h3> 
        </div> 
       </div> 
       <div class="caption"> 
        <h3>3</h3> 
        <p>...</p> 
        <p><a href="#" class="btn btn-primary" role="button">View</a></p> 
       </div> 
      </div> 

Пожалуйста, см http://www.bootply.com/OO8elZZx5j

-Alan-

Answer 1

Переполнение происходит потому, что у вас есть фон на колонке внутри .row класса. (.row по умолчанию дает отрицательные поля, которые компенсируются col-xx-xx, что дает эквивалентную прокладку).

Либо удалить поля путем переопределения их на строке:

.shadow > .row { 
    margin-right: 0; 
    margin-left: 0; 
} 

или (предпочтительно), дают целевой элемент левое поле и меньше ширина:

<div class="col-sm-12 col-md-12 col-lg-12" style="background-color:black; margin-left: 15px; width: 90%;"> 
    <h3 style="color: white">Purchase Order</h3> 
</div> 

Я создал новая скрипка, демонстрирующая это here.

Тем не менее, вам действительно не нужна строка в пределах каждой колонки в этой ситуации. То, что вы должны делать, это просто иметь регулярный DIV внутри внешнего столбца для обработки заголовка (с фоном) и другого div для обработки тела. Лучший способ справиться с этим:

<div class="col-sm-3 col-md-3 col-lg-3"> 
    <div class="thumbnail shadow"> 
    <div class="header"> 
     <h3 style="color: white">Purchase Order</h3> 
    </div> 
    <div class="caption"> 
     <h3>3</h3> 
     <p>...</p> 
     <p><a href="#" class="btn btn-primary" role="button">View</a></p> 
    </div> 
    </div> 
</div> 

Это автоматически обрабатывает ширину. Тогда вы можете просто стиль .header включать фон, и автоматически обрабатывать поля, если вы хотите, чтобы «принести заголовки больше»:

.header { 
    background-color: #000; 
    padding: 5px; 
    //margin-left: -5px; 
    //margin-right: -5px; 
} 

Я создал новый скрипку демонстрирующих этот here.

Надеюсь, это поможет! :)

Answer 2

.row имеет margin: 0 -15px; Если вы этого не хотите, не используйте его. Даже если вы замените его на .row-fluid, обратите внимание, что у вашего .thumbnail.shadow есть прокладка 4px, на которую вы должны наверстать.

Самое короткое решение - применить это исправление. Удалить style="background-color:black" из вашей специальной коробки и добавить его собственный класс, например black-heading:

.thumbnail.shadow>.row>.black-heading { 
    background-color: black; 
    margin: -4px 11px; 
    width: calc(100% - 22px); 
    border-radius: 4px 4px 0 0; 
} 
.thumbnail.shadow>.row>.black-header>h3 { 
    color: white; 
}