Question

我使用Bootstrap作为我的框架。

我有5个输入 4个输入的宽度以像素为单位现在我希望第5个输入使用宽度的其余部分，而不会破坏行。

HTML

<input type="text" style="width: 50px" />
<input type="text" style="width: 50px" />
<input type="text" style="width: 100%" /> //Resposive!
<input type="text" style="width: 50px" />
<input type="text" style="width: 50px" />

我希望有一个响应！

如果我使用此代码，该行将是100％的窗口和中断行我将如何管理这个？

修改
我应该提一下输入是“内联形式”!!

Answer 1

将width:calc(100% - 200px);应用于您的输入框，它将解决您的问题

Answer 2

Flexbox可以做到这一点：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
div {
  display: flex;
}
input {
  width: 50px;
}
input:nth-of-type(3) {
  flex: 1;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div>
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
</div>

将行宽设置为“剩余”的100％

2 个答案: