Кнопки и столбцы бутстрапа, расширяющие всю ширину тега div

Question

Я пытаюсь построить калькулятор начальной загрузки, используя систему шлифования, предоставленную Bootstrap. У меня есть два ряда, используя класс col-md-4 с каждой строкой, состоящей из 4 кнопок. Я бы ожидал увидеть, что кнопки расширяют всю ширину тега div. Когда я помещаю цвет фона в тег div, цвет заполняет весь тег div, как и я. Я создал код, чтобы проиллюстрировать мою проблему.

<div class="container"> 
<div class="cal-body"> 
<div class="header"> 
</div> 
<div class="lcd"> 
</div> 
<div class="row"> 
    <div class="col-md-4"> 
    <button>7</button> 
    <button>8</button> 
    <button>9</button> 
    <button>%</button> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-4" style="margin-bottom: 20px;"> 
    <button>4</button> 
    <button>5</button> 
    <button>6</button> 
    <button>X</button> 
    </div> 
    </div> 
    </div> 
</div> 
</div> 

Другими словами, я бы хотел, чтобы мои кнопки занимали всю длину строки столбца. На данный момент он занимает только 1/4 пространства столбцов. Я пытаюсь воспроизвести внешний вид калькулятора. My code pen: http://codepen.io/louis345/pen/KNoypX

Любая помощь будет принята с благодарностью.

Answer 1

Просто измените col-md-4 на col-md-12, если вы хотите охватить всю строку. Вы также можете добавить класс text-center в свои столбцы, чтобы сделать положение кнопки по центру.

Пример:

<div class="col-md-12 text-center"> 

</div 

Answer 2

Проверить this, чтобы увидеть, если это то, что вы ищете

Идея заключается в том, чтобы обернуть каждую кнопку на другой колонке

<div class="col col-sm-3"> 
    <button>7</button> 
</div> 

Answer 3

@claudios ваш ответ правильно [использовать класс (text-center)], и я просто реализую этот фрагмент.

.line{ 
 
    box-shadow:inset 0px 0px 2px #ccc; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<br> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-12 text-center line"> 
 
     <button class="btn btn-success">Submit</button> 
 
     <button class="btn btn-default">Cancel</button> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

Каждая строка содержит 12 столбцов, вы настраиваете в DIV использовать 4 столбца и он будет делать ДИВ использовать 1/3 размера. Кроме того, col-md необходимо использовать для размеров> = 768px. Вы должны использовать col-xs, потому что вы ограничиваете размер cal-body.

Я сделал это, основываясь на вашем codepen: http://codepen.io/anon/pen/BQMeXQ

Посмотрите здесь, 2 ряда, каждый из которых имеет 4 дивы, каждый из которых использует 3 колонки.

<style> 
    .button-group { 
    width: 100%; 
    margin-left: 15px; 
    } 
    .button-line { 
    width: 100%; 
    } 
    .button-col { 
    padding-left: 0px; 
    padding-right: 0px; 
    } 
    .button-col button{ 
    width: 100%; 
} 
</style> 

<div class="button-group"> 
    <div class="row button-line"> 
    <div class="col-xs-3 button-col"> 
     <button>7</button> 
    </div> 
    <div class="col-xs-3 button-col"> 
     <button>8</button> 
    </div> 
    <div class="col-xs-3 button-col"> 
     <button>9</button> 
    </div> 
    <div class="col-xs-3 button-col"> 
     <button>%</button> 
    </div> 
    </div> 

    <div class="row button-line"> 
    <div class="col-xs-3 button-col"> 
     <button>4</button> 
    </div> 
    <div class="col-xs-3 button-col"> 
     <button>5</button> 
    </div> 
    <div class="col-xs-3 button-col"> 
     <button>6</button> 
    </div> 
    <div class="col-xs-3 button-col"> 
     <button>x</button> 
    </div> 
    </div> 
</div>