Question

在我的项目中，有一个文本输入字段和两个按钮。按钮之一的内容是动态生成的，有时会有非常长的内容。问题在于内容长的按钮超出了其范围。
如何使列的宽度根据内容动态选择？
Bootstrap版本是3.4.1

https://newfivefour.com/golang-interface-type-assertions-switch.html

<div class="row">
  <div class="col-xs-10">
    <div class="hidden">
      <input type="hidden" class="form-control">
      <p class="help-block help-block-error"></p>
    </div>
    <div class="form-group">
      <input type="text" class="form-control">
      <p class="help-block help-block-error"></p>
    </div>
  </div>
  <div class="col-xs-1">
    <button type="submit" class="btn btn-primary">VERY LONG CONTENT</button>
  </div>
  <div class="col-xs-1">
    <button type="button" class="btn">Очистить</button>
  </div>
</div>

Answer 1

如果您不想使用溢出，则可以使用自定义类更改布局。由于引导程序3不支持自动列，因此您没有太多选择。我建议使用bootstrap 4或使用flexbox更改布局。

我用一个简单的解决方案创建了这个jsfiddle。

您可以使用justify-content和flex来设置元素的对齐方式它们的大小。

CSS：

.row-flex {
  display: flex;
  justify-content: space-between;
}

.input-group {
  flex: 1;
  margin-right: 10px;
}

Answer 2

尝试这种方式：

button {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

可能会有所帮助。

Answer 3

尝试这个：

.btn-primary {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   word-break: break-all; 
}

有用的代码。

按内容拉伸bootstrap3列

3 个答案: