Question

<div class="row">
<div class="col-md-12">

    <div class="col-sm-2 ">
        <div class="form-group">
            <label>
                Item Description
            </label>
            <select class="selectpicker" data-live-search="true">
                <option>Android</option>
                <option>iOS</option>
                <option>Windows</option>
                <option>Symbian</option>
                <option>Atari TOS</option>
                <option>Amiga OS</option>
                <option>Unix</option>
                <option>Linux</option>
                <option>OSX</option>
            </select>
        </div>
    </div>
</div>
</div>

我正在使用引导程序类selectpicker供用户选择选项。现在，我需要扩展此<select>字段。每当我更改列大小col-sm-2时，它都不会影响大小。所以这是两个问题： 如何扩展此字段的大小？我如何在两个使用col-md-offset-1的字段之间留出空间，这对给定字段（<select>）不起作用。

Answer 1

您需要使用自定义CSS来更好地控制字段。您可以使用select.selectpicker作为选择器并在其上应用CSS。我在左侧给出了元素边距，将id推向右侧。用于使选择效果更好的填充。您可以根据需要自定义这些值。

   

  <div class="row">
          <div class="col-md-12">
                       
            <div class="col-sm-2 ">
                   <div class="form-group">
                           <label>
                                Item Description
                          </label>
     <select class="selectpicker" data-live-search="true">
        <option>Android</option>
     <option>iOS</option>
         <option>Windows</option>
       <option>Symbian</option>
            <option>Atari TOS</option>
            <option>Amiga OS</option>
           <option>Unix</option>
           <option>Linux</option>
          <option>OSX</option>
                                             </select>
                        </div>
                        </div>
                         </div>
                        </div>
<style>
  select.selectpicker {
    width: 250px;
    padding: 5px;
    margin-left: 20px;
   }
</style>

扩大selectpicker引导程序类的列大小？

1 个答案: