Question

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

Answer 1

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

因此，您将删除float:left

正如@zimSystem指出的那样，您可以使用V4中的text-truncate实用程序类，而不是使用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

使用新的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

Answer 3

你可以使用flex，

bookmark/10/disco%20asdasd

删除了班级mx-1

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

3 个答案: