代码之家 › 专栏 › 技术社区 › tom

不带输入字段的拉伸输入组

bootstrap-4 css html

0

tom · 技术社区 · 6 年前

可能是对引导程序输入组组件的误用,但应该是可以实现的。

这就是我所拥有的:

以下是我想要的:

需要修复的代码:

<div class="cont">
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">foo</span>
      <span class="input-group-text">bar</span>
      <span class="input-group-text">This should stretch.</span>
    </div>
    <div class="input-group-append">
      <button class="btn btn-secondary" type="button">baz</button>
      <button class="btn btn-secondary" type="button">qux</button>
    </div>
  </div>
</div>

div.cont {
  border-left: 1px dotted gray;
  border-right: 1px dotted gray;
}

小提琴: https://jsfiddle.net/37o25zay/

1 回复 | 直到 6 年前

1

0

Temani Afif 6 年前

使用boosttrap类 flex-grow-1 允许元素增长并填充剩余空间( https://getbootstrap.com/docs/4.2/utilities/flex/#grow-and-shrink )

body {
  padding: 2em;
}

div.cont {
  border-left: 1px dotted gray;
  border-right: 1px dotted gray;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="cont">
  <div class="input-group">
    <div class="input-group-prepend flex-grow-1"> <!-- here -->
      <span class="input-group-text">foo</span>
      <span class="input-group-text">bar</span>
      <span class="input-group-text flex-grow-1">This should stretch.</span> <!-- here -->
    </div>
    <div class="input-group-append">
      <button class="btn btn-secondary" type="button">baz</button>
      <button class="btn btn-secondary" type="button">qux</button>
    </div>
  </div>
</div>