Bootstrap 4 - 如何将自动宽度设置为中央内联或弹性元素？

Question

Example here。如果 "token" 很长，我需要将其隐藏在省略号上。我不喜欢 max-width: calc() 的解决方案，因为它非常具体。是否可以用 Bootstrap 4、flex-box 或类似的方法解决？

Answer 1

您可以在 inliner-container div 中添加 d-flex 实用程序 class 并将 flex:0 100% 添加到 .mx-1

因此，您将删除 float:left

正如 @zimSystem 指出的那样，您可以使用 V4 中的 text-truncate 实用程序 class，而不是使用 CSS 属性。

.mx-1 {
  flex: 0 100%
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
  <div class="card my-1" data-id="17629520">
    <div class="card-header py-1">
      <a href="http://vk.com/disorrder"><span class="text-uppercase text-info pr-2">vk</span></a>
      <b>Username</b>
    </div>
    <div class="card-block py-2">
      <div class="inliner-container d-flex">
        <b class="">Token(OK):</b>
        <code class="inliner-width mx-1 text-truncate">
          LONG_TEXT_HERE_WITH_ELLIPSIS_5734cc381443bacf05913516a48f5e1c55d4f2f15f79a273d0c07886b914dd07d3397c2cba9eaf18d6cdd
        </code>
        <button class="btn btn-sm btn-warning">
          <i class="fa fa-refresh" aria-hidden="true"></i>
        </button>
      </div>
      <div class="inliner-container  d-flex">
        <b class="">Token(OK):</b>
        <code class="inliner-width mx-1 text-truncate">
          short_text
        </code>
        <button class="btn btn-sm btn-warning">
          <i class="fa fa-refresh" aria-hidden="true"></i>
        </button>
      </div>
    </div>
    <div class="mt-2">
      <div>
        Добавить:
        <a class="btn btn-sm btn-outline-success text-uppercase ml-1" href="/vk/token" target="_blank">vk</a>
      </div>
    </div>
  </div>

Answer 2

你可以使用 flex，

<div class="inliner-container">
    <b class="inliner-width flex-div">Token(OK):</b>
    <code class="inliner-width flex-div ellipsis">
      LONG_TEXT_HERE_WITH_ELLIPSIS_5734cc381443bacf05913516a48f5e1c55d4f2f15f79a273d0c07886b914dd07d3397c2cba9eaf18d6cdd
    </code>
    <button class="btn btn-sm btn-warning flex-div">
      <i class="fa fa-refresh" aria-hidden="true"></i>
    </button>
  </div>

.inliner-container {
  display: flex;
 }
.flex-div{
  flex-direction: column;

}
.ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
}

删除了 class mx-1

Answer 3

使用新的 d-flex 和 text-truncate 类..

<div class="card-block py-2">
      <div class="d-flex inliner-container">
        <b class="inliner-width">Token(OK):</b>
        <code class="inliner-width mx-1 text-truncate">
          LONG_TEXT_HERE_WITH_ELLIPSIS_5734cc381443bacf05913516a48f5e1c55d4f2f15f79a273d0c07886b914dd07d3397c2cba9eaf18d6cdd
        </code>
        <button class="btn btn-sm btn-warning">
          <i class="fa fa-refresh" aria-hidden="true"></i>
        </button>
      </div>
      <div class="inliner-container">
        <b class="inliner-width">Token(OK):</b>
        <code class="inliner-width mx-1" style="max-width: calc(100% - 60px - 35px);">
          short_text
        </code>
        <button class="btn btn-sm btn-warning">
          <i class="fa fa-refresh" aria-hidden="true"></i>
        </button>
      </div>
      <div class="d-flex justify-content-between">
        <b>Token(Help):</b>
        <code class="mx-1 text-truncate">
          5734cc381443bacf05913516a48f5e1c55d4f2f15f79a273d0c07886b914dd07d3397c2cba9eaf18d6cdd
        </code>
        <button class="btn btn-sm btn-warning">
          <i class="fa fa-refresh" aria-hidden="true"></i>
        </button>
      </div>
      <div class="mt-1">
        <a class="btn btn-sm btn-primary" href="#">Save</a>
      </div>
  </div>

https://codepen.io/anon/pen/jBZGGE

Bootstrap 4 - 如何将自动宽度设置为中央内联或弹性元素？

Bootstrap 4 - How to set auto width to central inline or flex element?

css

flexbox

twitter-bootstrap

twitter-bootstrap-4