响应式 bootstrap 3 个按钮并排，没有换行符，仅在太小时显示符号

Question

那里有很多按钮样式问题，但我找不到适合我的问题，如果你看到了，请 link 我解决。

我想要的：

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

我正在使用 bootstrap 3.
首先我的按钮是这样的：

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

我希望按钮变得更窄，而不是换行。
但是因为截断的文字看起来不好，所以应该隐藏起来，只留下一个符号。
这也适用于 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>

Answer 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>

Answer 2

您可以在按钮文本周围添加 span 标记。在这里我用 class 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>

响应式 bootstrap 3 个按钮并排，没有换行符，仅在太小时显示符号

Responsive bootstrap 3 buttons side by side without line breaks, only show symbol when too small

html

css

button

less

twitter-bootstrap-3