html - 使用 Bootstrap 选择表单中的多个按钮

Question

我有一组按钮，它们构成了表单的一部分。

代码如下:

<div class="form-group">
    <div>
        <h4>Extras</h4>
    </div>
    <div class="radio-inline">               
         <input type="button" class="btn btn-default inline" name="extra" value="Garden" > 
         <input type="button" class="btn btn-default inline" name="extra" value="Balcony">  
         <input type="button" class="btn btn-default inline" name="extra" value="Parking">  
    </div>  
</div>

但是，我想让选项不相互排斥，即您可以同时选择“花园”和“阳台”- 我想保留按钮样式。

有人可以帮忙吗？

编辑:好的 - 现在发生了一些奇怪的事情 - 得到了这段代码。

<div class="btn-group" data-toggle="buttons">
                      <label class="btn btn-default">
                        <input type="checkbox" name="garden" checked=""> Garden
                      </label>
                      <label class="btn btn-default">
                        <input type="checkbox"> Balcony
                      </label>
                      <label class="btn btn-default">
                        <input type="checkbox"> Parking
                      </label>
                    </div>

当我使用 bootply 时，多选用户功能非常有用 - 当我将它添加到我的页面时 - 它不起作用 - 有没有人知道为什么会这样？下面是整个页面

<div class="container">
    <div class="row">
        <div class="col-md-12"><h2>This is the header</h2></div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <h2>Hello world!</h2>
            <form d="multiform" role="form" action="listing.php" method="post" enctype="multipart/form-data">
                <div><h4>Listing Type</h4></div>

                <div class="radio">                          
                     <input type="button" class="btn btn-default" value="For Sale" > 
                     <input type="button" class="btn btn-default inline" name="list_type" value="For Rent">  
                     <input type="button" class="btn btn-default inline" name="list_type" value="Flat Share">  
                </div>                      
                <div class="form-group">
                    <label for="text">Title</label>
                        <input class= "form-control" type="text" name="text">
                </div>

                <div class="form-group">
                <label for="desc">Description</label>
                <textarea class= "form-control" name="desc" rows="5"></textarea>
                </div>


        <!nested columns in the first one!>
            <div class="col-md-6"> 

                     <div class="form-group">
                     <label for="total_beds">Total Bedrooms</label>
                         <select class="form-control" name="total_beds">
                              <option>Total Bedrooms</option>
                              <option>1</option>
                              <option>2</option>
                              <option>3</option>
                              <option>4</option>
                              <option>5</option>
                          </select>
                      </div>


                         <div class="form-group">
                     <label for="pets">Pets</label>
                         <select class="form-control" name="pets">
                              <option>Pets OK?</option>
                              <option>Yes</option>
                              <option>No</option>

                          </select>
                      </div>


                    <p>This is another p</p>
            </div>
            <div class="col-md-6">
                        <div class="form-group">
                        <label for="postcode">Postcode (for Maps)</label>
                        <input type="text" class="form-control" name="postcode" placeholder="Post Code">
                </div>
            </div>
            <div class="col-md-12">

                <div class="form-group">
                    <div><h4>Extras</h4>
                        <div class="checkbox">               
                             <input type="button" class="btn btn-default inline" name="extra" value="Garden" > 
                             <input type="button" class="btn btn-default inline" name="extra" value="Balcony">  
                             <input type="button" class="btn btn-default inline" name="extra" value="Parking">  
                    </div>  
                </div>

                    <div class="btn-group" data-toggle="buttons">
                      <label class="btn btn-default">
                        <input type="checkbox" name="garden" checked=""> Garden
                      </label>
                      <label class="btn btn-default">
                        <input type="checkbox"> Balcony
                      </label>
                      <label class="btn btn-default">
                        <input type="checkbox"> Parking
                      </label>
                    </div>
            </div>
            </form>



        </div>

        <div class="col-md-4">Hello world Right!        </div>


</div><! closes container!>

Answer 1

参见 JavaScript buttons section of the Bootstrap documentation ，然后查看 checkbox 按钮:

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Option 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3
  </label>
</div>