checkbox on Bootstrap 3 отображается неправильно в ответном макете

Question

Я использую Bootstrap buttons для создания флажков с изображениями. Когда я непосредственно использую пример кода, кнопки не имеют флажка. Но когда я помещаю их в отзывчивый макет, у них есть флажок.

Я создал a JSFiddle, который демонстрирует это. Есть ли способ иметь кнопки Bootstrap без флажка?

Вот код:

<div class="container-fluid"> 
    <div class="row"> 
    <div class="btn-group" data-toggle="buttons"> 
    <div class="col-md-4"> 
     <label class="btn btn-primary"> 
     <input autocomplete="off" type="checkbox"> 
      Checkbox 1 
     </label> 
    </div> 
    <div class="col-md-4"> 
     <label class="btn btn-primary"> 
     <input autocomplete="off" type="checkbox"> 
      Checkbox 2 
     </label> 
    </div> 
    <div class="col-md-4"> 
     <label class="btn btn-primary"> 
     <input autocomplete="off" type="checkbox"> 
      Checkbox 3 
     </label> 
    </div> 
    </div> 
</div> 

Answer 1

Ваша разметка откусил - это должно быть так:

<div class="container-fluid"> 
    <div class="row"> 

    <div class="col-md-4"> 
     <div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-primary"> 
      <input type="checkbox" autocomplete="off"> Checkbox 1 
     </label> 
     </div> 
    </div> 

    <div class="col-md-4"> 
     <div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-primary"> 
      <input type="checkbox" autocomplete="off"> Checkbox 2 
     </label> 
     </div> 
    </div> 

    <div class="col-md-4"> 
     <div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-primary"> 
      <input type="checkbox" autocomplete="off"> Checkbox 3 
     </label> 
     </div> 
    </div> 

    </div> 
</div> 

См this demo bootply

Несколько ошибок отметить в своем коде, за пределами структуры:

У вас есть: <div class=".col-md-4">, '.' не должно быть в .col-md-4, также необходимо удалить теги закрытия ввода (</input>) - входы самозакрывающиеся