html - Bootstrap 4 - 输入行比全宽大 1%

Question

所以我有一个我一直在搞乱的简单表格:

<div class="container">
    <form name="form" method="post">

    <div class="form-row mt-5">
        <div class="col-3">
            <label class="sr-only form-control-label required" for="form_column_name">Column Name</label>
            <select id="form_column_name" name="form[column_name]" class="form-control-lg form-control"><option value="Field 1" selected="selected">Field 1</option><option value="Field 2">Field 2</option></select>
        </div>
        <div class="col-8">
            <label class="sr-only form-control-label required" for="form_column_value">Column Value</label>
            <input type="text" id="form_column_value" name="form[column_value]" required="required" class="form-control-lg form-control" placeholder="Query" />
        </div>
        <div class="col-1">
            <button class="btn btn-primary btn-lg" type="button">Search</button>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-12">
            <div class="progress" style="height: 25px;">
                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-12">
            <table class="table" width="101%">
                <thead class="thead-light">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First Name</th>
                    <th scope="col">Last Name</th>
                    <th scope="col">Username</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    <input type="hidden" id="form__token" name="form[_token]" value="n0n-XzlZGwNC4-GUi8PiM5UYC25lSx_vMg7qwI7OPSg" />
</form>
</div>

这是一个 Symfony 3 Twig 模板，看起来像这样:

如您所见，输入仅比其他元素稍长，即使所有元素都位于 col-12。

有人知道怎么解决吗？我可以将进度条设置为 width: 101%，但我不知道如何更改表格。而且感觉有点hacky，所以我想知道是否有更好的解决方案。

此外，使用 container-fluid 会导致大小差异发生变化:

所以我假设我设置的 form 是错误的。我试过使用 form-inline，但也无法使边距和居中以这种方式工作。

Answer 1

看起来你需要重置按钮上的填充并给它一个宽度:

<button class="btn btn-primary btn-lg pr-0 pl-0 w-100" type="button">Search</button>

下面的演示以整页播放

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <form name="form" method="post" >

    <div class="form-row mt-5">
      <div class="col-3">
        <label class="sr-only form-control-label required" for="form_column_name">Column Name</label>
        <select id="form_column_name" name="form[column_name]" class="form-control-lg form-control"><option value="Field 1" selected="selected">Field 1</option><option value="Field 2">Field 2</option></select>
      </div>
      <div class="col-8">
        <label class="sr-only form-control-label required" for="form_column_value">Column Value</label>
        <input type="text" id="form_column_value" name="form[column_value]" required="required" class="form-control-lg form-control" placeholder="Query" />
      </div>
      <div class="col-1" style="flex-shrink:1">
        <button class="btn btn-primary btn-lg pr-0 pl-0 w-100" type="button">Search</button>
      </div>
    </div>
    <div class="row mt-3">
      <div class="col-12">
        <div class="progress" style="height: 25px;">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
        </div>
      </div>
    </div>
    <div class="row mt-3">
      <div class="col-12">
        <table class="table" width="101%">
          <thead class="thead-light">
            <tr>
              <th scope="col">#</th>
              <th scope="col">First Name</th>
              <th scope="col">Last Name</th>
              <th scope="col">Username</th>
            </tr>
          </thead>
          <tbody>

          </tbody>
        </table>
      </div>
    </div>
    <input type="hidden" id="form__token" name="form[_token]" value="n0n-XzlZGwNC4-GUi8PiM5UYC25lSx_vMg7qwI7OPSg" />
  </form>
</div>

您还可以添加响应类，为按钮文本留出空间:

<div class="col-lg-8 col-sm-7"> 

<div class="col-lg-1 col-sm-2">

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <form name="form" method="post" class="m-0">

    <div class="form-row mt-5">
      <div class="col-3">
        <label class="sr-only form-control-label required" for="form_column_name">Column Name</label>
        <select id="form_column_name" name="form[column_name]" class="form-control-lg form-control"><option value="Field 1" selected="selected">Field 1</option><option value="Field 2">Field 2</option></select>
      </div>
      <div class="col-lg-8 col-sm-7">
        <label class="sr-only form-control-label required" for="form_column_value">Column Value</label>
        <input type="text" id="form_column_value" name="form[column_value]" required="required" class="form-control-lg form-control" placeholder="Query" />
      </div>
      <div class="col-lg-1 col-sm-2" style="flex-shrink:1">
        <button class="btn btn-primary btn-lg pr-0 pl-0 w-100" type="button">Search</button>
      </div>
    </div>
    <div class="row mt-3">
      <div class="col-12">
        <div class="progress" style="height: 25px;">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
        </div>
      </div>
    </div>
    <div class="row mt-3">
      <div class="col-12">
        <table class="table" width="101%">
          <thead class="thead-light">
            <tr>
              <th scope="col">#</th>
              <th scope="col">First Name</th>
              <th scope="col">Last Name</th>
              <th scope="col">Username</th>
            </tr>
          </thead>
          <tbody>

          </tbody>
        </table>
      </div>
    </div>
    <input type="hidden" id="form__token" name="form[_token]" value="n0n-XzlZGwNC4-GUi8PiM5UYC25lSx_vMg7qwI7OPSg" />
  </form>
</div>