Создание простой кнопки для использования размера столбца из начальной загрузки

Моя идея - создать простую зеленую кнопку. Нет текста, нет границы, только зеленая фигура, которая наследует размер col-md-12 от бутстрапа. Я видел, что есть много похожих вопросов, однако у меня есть проблема с базовым пониманием, поэтому я был бы признателен, если бы вы помогли мне понять это.Создание простой кнопки для использования размера столбца из начальной загрузки

<body> 
    <div class="col-md-12"> 
     <button class="button" type="button" style="border:none; display:inline-block; color:green;"></button> 
    </div> 
</body>

Итак, это то, что я сделал. У меня есть тело, и у меня есть класс col-md-12. Это нормально, я думаю. Затем я решил создать кнопку. У меня есть тег кнопки, class=button, type=button, и у меня есть стиль> простой зеленый цвет и встроенный блок, чтобы отобразить эту кнопку над col-md-12. Однако! Ничего не произошло. Могу я спросить, почему?

Я не хочу устанавливать размеры по назначению, я хочу просто установить цельный col-md-12. Могу ли я спросить, что я не понимаю правильно? Спасибо.

источник

2016-12-19 Testing man

Какую версию Bootstrap вы используя? – Gilbert

bootstrap 3, bootstrap.min.css –

Сегменты сетки Bootstrap работают только внутри строк, и эти строки должны находиться внутри контейнера. Также вам нужно дать вашей кнопке ширину 100%, если вы хотите, чтобы она растянулась. – j08691

По словам j08691, вы должны вставлять столбцы внутри строки для того, чтобы работать должным образом:

<body> 
    <div class="row"> 
     <div class="col-md-12"> 
      <button class="button" type="button" style="border:none; display:inline-block; color:green;"></button> 
     </div> 
    </div> 
</body>

Но это обыкновение быть достаточно, потому что по умолчанию ваша кнопка не займет все пространство, так что вы нужно добавить width: 100%; свойство на нем:

<body> 
    <div class="row"> 
     <div class="col-md-12"> 
      <button class="button" type="button" style="width: 100%; border:none; display:inline-block; color:green;"></button> 
     </div> 
    </div> 
</body>

Демо: https://jsfiddle.net/w1njoLL0/

источник

2016-12-19 17:08:16 AntoineB

Я скопирую ваш второй код, но все равно ничего. это меня разочаровывает, потому что это работает:

–

Второй код работает для меня. Я добавил демоверсию, которая действительно работает. – AntoineB

O.K. я набрал привет в , и я получаю то же самое решение, что и вы в демо. Тем не менее, мне бы очень хотелось получить только зеленую кнопку без текста. Если я удалю текст, ничего не произойдет. Спасибо. –

Просто добавьте класс «форм-контроль» на кнопку метки.

JSFiddle

<div class="row"> 
    <div class="col-md-12"> 
     <button class="btn btn-success form-control" type="button">Hello</button> 
    </div> 
</div>

источник

2016-12-19 17:27:11

да это работает. Спасибо. –

@Testingman Мое удовольствие :) –

Создание простой кнопки для использования размера столбца из начальной загрузки

ответ

Смежные вопросы