响应式引导程序 3 个按钮并排没有换行，仅在太小时显示符号答案

【问题标题】：Responsive bootstrap 3 buttons side by side without line breaks, only show symbol when too small响应式引导程序 3 个按钮并排没有换行，仅在太小时显示符号
【发布时间】：2019-01-07 17:01:12
【问题描述】：

那里有很多按钮样式问题，但我找不到适合我的情况的问题，如果您看到请给我链接。

我想要什么：

所有按钮都应分布在整个可用宽度上
一旦出现溢出，文本应该被隐藏，只显示符号
不应该出现换行符 - 如果空间变得太小，即使只剩下符号，溢出的按钮应该被隐藏

我正在使用引导程序 3。
首先我的按钮如下所示：

...当我将浏览器窗口缩小一点时，如下所示：

我希望按钮变得更窄，而不是换行。
但是由于截断的文字看起来很糟糕，所以应该隐藏它，只留下一个符号。
这也适用于 3 个按钮，目前也很混乱：

这是我的示例，父级具有一定的宽度，我通过将其设置为 75% 来模拟。问题是，按钮现在断线了。而且我也不知道如何仅使用 less 和 css 使文本在溢出时消失。

.fixed-footer {
  width: 75%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="fixed-footer">
  <div class="btn-toolbar">
    <div class="btn-group">
      <button class="btn btn-default"><i class="fa fa-plus"></i> Neues Projekt</button>
    </div>
    <div class="btn-group">
      <a class="btn btn-success" href=""><i class="fa fa-upload"></i> Projekte exportieren</a>
    </div>
    <div class="btn-group">
      <button class="btn btn-default"><i class="fa fa-edit"></i> Bearbeiten</button>
    </div>
  </div>
</div>

【问题讨论】：

“而且我也不知道如何仅使用 css 使文本在溢出时消失” - 我怀疑这根本不可能......（至少如果你想要它是灵活和动态的，并且不需要预先进行大量测量以得出一些“神奇的数字”。）
没有神奇的 css 可以自动执行此操作 - 您需要计算溢出断点并添加媒体查询来处理它（将文本包装在一个跨度中，并在遇到断点时使用 display none )
感谢信息，我补充说我正在使用较少，也许有可能吗？
@Cold_Class 是可能的。使用媒体查询断点。我不确定 bootstrap 3 但在 bootstrap 4 中你可以有flex 显示并且有大量的对齐和分布选项。 getbootstrap.com/docs/4.0/utilities/flex

标签： html css button twitter-bootstrap-3 less

【解决方案1】：

这是我的解决方案

使按钮成为 flex-container 父级。

然后将flex:1 分配给每个按钮，这将使它们变得灵活，您还可以添加更多按钮。

然后使用@media(max-width:400px)规则，将文字隐藏在400px以下

将此添加到您的 css 中

.b-container {
  display: flex;
}

.b-container .btn {
  flex: 1
}

@media(max-width:400px) {
  .b-container .text {
    display: none;
  }
}

.fixed-footer {
  width: 75%;
}

.b-container {
  display: flex;
}

.b-container .btn {
  flex: 1
}

@media(max-width:400px) {
  .b-container .text {
    display: none;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="fixed-footer">
  <div class="btn-toolbar b-container">

    <button class="btn btn-default"><i class="fa fa-plus"></i> <span class="text"> Neues Projekt  </span>
    </button>


    <a class="btn btn-success" href=""><i class="fa fa-upload"></i> <span class="text">Projekte exportieren </span>
    </a>


    <button class="btn btn-default"><i class="fa fa-edit"></i><span class="text"> Bearbeiten</span>
    </button>

  </div>
</div>

【讨论】：

非常感谢，我不知道 flex:1 的技巧——我想没有简单的方法可以通过自动检查溢出来概括它，所以使用 @media 似乎是最好的解决方法

【解决方案2】：

您可以在按钮文本周围添加span 标签。在这里，我添加了类btn__txt的跨度

然后使用媒体查询将其隐藏在小屏幕中

.fixed-footer {
  width: 75%;
}
 
@media only screen and (max-width: 768px) {
  .btn .btn__txt{
    display:none;
  }  
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="fixed-footer">
  <div class="btn-toolbar">
    <div class="btn-group">
      <button class="btn btn-default"><i class="fa fa-plus"></i><span class="btn__txt"> Neues Projekt</span></button>
    </div>
    <div class="btn-group">
      <a class="btn btn-success" href=""><i class="fa fa-upload"></i><span class="btn__txt"> Projekte exportieren</span></a>
    </div>
    <div class="btn-group">
      <button class="btn btn-default"><i class="fa fa-edit"></i> <span class="btn__txt">Bearbeiten</span></button>
    </div>
  </div>
</div>

【讨论】：