Question

我有一个带有页脚的bootstrap-4卡。页脚内部有一个（固定宽度）输入字段和一个按钮。该按钮应扩展到width：100％-输入字段的宽度。

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，但这会将具有input + button的行分成两行。

Answer 1

You can use property css width: calc(100% - "width_your_button");

Or Bootstrap example:

<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>

Answer 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>

Answer 3

最好使用引导程序列来执行此操作。（引导程序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>

引导程序4：固定宽度的列+卡脚中的其余行

3 个答案: