Question

我正在尝试创建包含3列的行。一个用于分页计数，一个用于过滤表格，另一个用于按住按钮。

在小，中和大视口中，一切看起来都很不错，但是当我最大化窗口时，在桌子上方的右侧就有巨大的空隙。请参阅下面的图像（底部）以供参考。

我不确定我要去哪里。我已经尝试过flex-fill，w-100等的所有变体，我可以想到让它在xl视口上扩展到100％的宽度，但我无法弄清楚。

这是表格上方该部分的相关代码：

<div class="col">
    <div class="container no-padding">
        <div class="row mt-1">
            <div class="col d-none d-md-block no-padding">
                <p>Showing {{ $assets->firstItem() }}-{{ $assets->lastItem() }} of {{ $assets->total() }} total</p>
            </div>
            <div class="col-auto flex-fill flex-md-grow-0 no-padding mb-3">
                <div class="container">
                    <div class="row">
                        <div class="col m-0 p-0 mr-2">
                            <form class="form-inline">
                                <div class="input-group">
                                    <input style="font-size:80%;" class="form-control" type="text" name="filter" value="" placeholder="Filter results">
                                </div>
                            </form>
                        </div>
                        <div class="no-padding">
                            <a class="btn btn-dark btn-sm mr-1" href="{{ action('AddAssetController@index') }}" role="button"><i style="font-size:80%;" class="fas fa-plus"></i> New Asset</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

编辑：

这是模板中的代码。上面的代码是@section('content')的一部分，该代码将输出到下面的@yield('content')并进行解析。

<div class="row">
    <div class="col-12 no-padding">
        @include('layout.includes.header')
    </div>
</div>
<div class="row h-100">
    <div class="col-12">
        <!-- Begin nav/content row --> 
        <div class="row h-100">
            <div id="sidebar-wrapper" class="visible">
                @include('layout.includes.nav')
            </div>
            <!-- Begin main column -->
            <div class="col content" style="overflow-x:auto;">
                <div class="row no-padding">
                    <div class="col d-none d-sm-block">
                        <h4>@yield('content-heading')</h4>
                    </div>
                    <div class="col flex-grow-1">
                        @include('layout.includes.searchform')
                    </div>
                </div>
                <div class="row no-padding inner-box shadow p-3 mb-5 bg-white rounded">
                    @yield('content') <!--this is where the original code appears-->
                </div>
            </div>
            <!-- END main column-->
        </div>
        <!-- END nav/content row-->
    </div>
</div>

Answer 1

不确定这是否是您想要实现的目标，但是，我尽力使它看起来像您想要的，让我知道是否真的是这样：https://jsfiddle.net/leandrorr/t4rbfdv3/6/

html：

<div class="result-count p-4 border">
  <div class="container-fluid">
    <div class="row align-items-center">
      <div class="col-lg-6">
        Showing 1-20 of 32 total
      </div>
      <div class="col-lg-6">
        <form action="" class="form-inline float-right">
          <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
          <button type="submit" class="btn btn-primary mb-2">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>

Bootstrap 4行未扩展到100％宽度

1 个答案: