代码之家  ›  专栏  ›  技术社区  ›  Mike Flynn

缩短Bootstrap表单列中输入框的宽度,而不影响其他元素

  •  1
  • Mike Flynn  · 技术社区  · 4 年前

    我想减小两个圆形输入框的大小,但保持其他所有内容不变。它有一个类 hasTimepicker 要做这样的事情,但使用我不太熟悉的flex CSS,我还没能弄清楚。我该怎么做?我想用 rem 就像Bootstrap一样,但不确定这是否有必要。

       <div class="form-row">
    .
    .
    .
        <div class="col-auto">
                <div class="input-group mr-2">
                    <!-- ko if: position() == 'Between' -->
                    <input autocomplete="off" data-bind="time: { options : { defaultTime:'8:00', showPeriod: true, showLeadingZero: false} }" maxlength="8" name="StartTime" placeholder="11:00 AM" type="text" value="" id="tp1586096023489" class="hasTimepicker w-25"> 
                    <div class="input-group-prepend input-group-append">
                        <span class="input-group-text">-</span>
                    </div>
                    <!-- /ko -->
                    <!-- ko if: position() != 'On' -->
                    <input autocomplete="off" data-bind="time: { options : { defaultTime:'8:00', showPeriod: true, showLeadingZero: false} }" maxlength="8" name="EndTime" placeholder="4:00 PM" type="text" value="" id="tp1586096023490" class="hasTimepicker active"> 
                    <!-- /ko -->
                    <!-- ko if : position() != 'On' -->
                    <div class="input-group-prepend input-group-append">
                        <span class="input-group-text">on</span>
                    </div>
                    <!-- /ko -->
        <select id="DateString" name="DateString"><option value=""> - All Days -</option>
        <option>Fri. Feb 28, 2020</option>
        <option>Sat. Feb 29, 2020</option>
        </select>        </div>
            </div>
    .
    .
    .
         </div>
    

    Sho

    0 回复  |  直到 4 年前