Bootstrap 4：列固定宽度+卡片页脚中的其余行答案

【问题标题】：Bootstrap 4: Columns fixed width + rest of line in card-footerBootstrap 4：列固定宽度+卡片页脚中的其余行
【发布时间】：2019-02-23 08:18:36
【问题描述】：

我有一张带页脚的 bootstrap-4 卡。在页脚内部有一个（固定宽度）输入字段和一个按钮。按钮应扩展为 width:100% - 输入字段的宽度。

https://jsfiddle.net/aq9Laaew/224543/

input {
  width:3rem;
}

<div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
    </div>
    <div class="card-footer">
      <input type="text" value="1" />
      <button>
        Rest of width
      </button>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
    </div>
    <div class="card-footer">
      <div class="col-auto">
        <input type="text" value="1" />      
      </div>
      <div class="col-12">
        <button>
          Rest of width
        </button>
      </div>
  </div>
</div>

怎么做？正如您在小提琴中看到的那样，我尝试使用 col-auto，但这会将输入 + 按钮的行分成 2 行。

【问题讨论】：

col-12 类实际上已经占用了 100% 的宽度（因为在引导程序中默认它是 12col-grid）也许你必须调整这个列或者 flex 选项在这里很有用（见：getbootstrap.com/docs/4.0/utilities/flex）？

标签： css flexbox bootstrap-4

【解决方案1】：

最好使用引导列来执行此操作。（引导程序 4）

您也可以使用 css calc() 属性。请参考以下示例。

/*CSS for Example 1*/
.ex-1 input {
  float: left;
  width: 3rem;
}

.ex-1 button {
  display: block;
  float: left;
  width: calc( 100% - 3rem);
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
   
  <!-- Example 1 -->
  <div class="card ex-1">
    <div class="card-body">
      <h5 class="card-title">Exxample 1</h5>
      <p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
    </div>
    <div class="card-footer">
      <input type="text" value="1" />
      <button>
        Rest of width
      </button>
    </div>
  </div>
  
  <!-- Example 2 -->
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Example 2</h5>
      <p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
    </div>
    <div class="card-footer">
      <div class="row">
        <div class="col-2 pr-0">
          <input type="text" class="form-control" value="1">
        </div>
        <div class="col-10 pl-0">
          <button class="p-1 w-100">Rest of width</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

【讨论】：

【解决方案2】：

首先将d-flex 类添加到card-footer 使其成为弹性容器，然后添加以下CSS 应该可以解决问题：

.card-footer button { flex: 1 }

flex: 1 使按钮占据剩余空间。

input {
  width:3rem;
}

button {
  flex: 1;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
 
 
 <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
    </div>
    <div class="card-footer d-flex">
      <input type="text" value="1" />
      <button>
        Rest of width
      </button>
    </div>
  </div>

【讨论】：

【解决方案3】：

您可以使用属性 css width: calc(100% - "width_your_button");

或引导示例：

<div class="card-footer">
      <div class=" col-sm-2 col-xs-2 col-md-2 col-lg-2">
        <input type="text" value="1" />      
      </div>
      <div class=" col-sm-10 col-xs-10 col-md-10 col-lg-10">
        <button>
          Rest of width
        </button>
      </div>
  </div>

【讨论】：