时间戳

首页 > 解决方案 > 如何使div中的三个按钮响应？

css - 如何使div中的三个按钮响应？

问题描述

我正在使用 Bootstrap 4 并在 div 中遇到有关按钮响应的问题。我有搜索栏， 在此处输入图像描述

当我缩小选项卡然后像这样显示时， 在此处输入图像描述 我有以下代码，

 <div class="col-12" style="margin-bottom: 15px !important;">
            <form method="get" action="{{route('invoice.index')}}" id="invoice_search">
                <div class="row" style="background: #f8f9fa !important; padding: 10px;">
                    <div class="col-lg-3 col-md-12"  style="margin-bottom: 5px; margin-top: 5px;">
                        <select name="provider" class="form-control">
                            <option value="">{{__('dashboard.invoicesView.provider')}}</option>
                            @forelse($providers as $provider)
                                <option value="{{$provider->provider}}" {{(request()->get('provider') === $provider->provider) ? 'selected' : ''}}>{{{$provider->provider}}}</option>
                            @empty
                            @endforelse
                        </select>
                    </div>
                    <div class="col-lg-3 col-md-12" style="margin-bottom: 5px; margin-top: 5px;">
                        <input type="text" readonly style="background: #00000000 !important;" class="form-control invoice_date_range" value="{{request()->has('start_date') ? \Carbon\Carbon::parse(request()->get('start_date'))->format('m/d/Y') : '01/01/2021'}} - {{request()->has('end_date') ? \Carbon\Carbon::parse(request()->get('end_date'))->format('m/d/Y') : '01/15/2021'}}" />
                        <input type="hidden" name="start_date" id="start_date">
                        <input type="hidden" name="end_date" id="end_date">
                    </div>
                    <div class="col-lg-3 col-md-12 irs-demo"  style="margin-bottom: 5px; margin-top: 5px;">
                        <input type="text" id="range_03" value="" />
                        <input type="hidden" name="min_amount" id="min_amount">
                        <input type="hidden" name="max_amount" id="max_amount">
                    </div>
                    <div class="col-lg-3 col-md-12 align-center" style="margin-top: 5px;">
                        <button type="submit" class="btn btn-default">{{__('dashboard.invoicesView.search')}}</button>
                        <a href="{{route('invoice.index')}}" class="btn btn-default" title="Clear Filter">
                            <img src="{{asset('img/icon/clear-filters.png')}}" id="clear_filter" style="width: 20px; height: 20px;">
                        </a>
                        <button type="button" name="invoice_upload" class="btn btn-default" data-toggle="modal" data-target=".upload-invoice-modal">{{__('dashboard.invoicesView.uploadInvoice')}}</button>
                    </div>
                </div>
            </form>
        </div>

我怎样才能使大中型设备对齐。谢谢

标签： csstwitter-bootstrap

解决方案

在 Bootstrap 4 中，您可以改用“内联表单”。例子，

<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

有关更多详细信息，请参见引导程序网站 - https://getbootstrap.com/docs/4.5/components/forms/#inline-forms

推荐阅读