避免换行符引导按钮组

我有一个引导按钮组，其中包括按键之间的文本：避免换行符引导按钮组

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 
 
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
      <div class="btn-group"> 
 
       <div class="btn btn-primary"> 
 
        <i class="fa fa-chevron-left"></i> 
 
       </div> 
 
       <div>2016</div> 
 
       <div class="btn btn-primary"> 
 
        <i class="fa fa-chevron-right"></i> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

如何避免换行，使得按钮和文本排成一行？

来源

2016-11-20 Thomas W.

你需要在网上，以显示他们像：

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 
 
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
      <div class="btn-group"> 
 
       <div class="btn btn-primary" style="display: inline-block;"> 
 
        <i class="fa fa-chevron-left"></i> 
 
       </div> 
 
       <div style="display: inline-block;">2016</div> 
 
       <div class="btn btn-primary" style="display: inline-block;"> 
 
        <i class="fa fa-chevron-right"></i> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

编辑：Alternat此外，正如Turnip在他的回答中提出的那样，您可以将元素从div s更改为另一种自然显示在内的元素。无论哪种方式，你都会达到同样的结果。

来源

2016-11-20 19:20:00 SpencerD

div s是块元素。将按钮更改为<a> s，将文本div更改为<span>或任何其他内嵌/内嵌块元素。

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 
 
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
      <div class="btn-group"> 
 
       <a class="btn btn-primary"> 
 
        <i class="fa fa-chevron-left"></i> 
 
       </a> 
 
       <span>2016</span> 
 
       <a class="btn btn-primary"> 
 
        <i class="fa fa-chevron-right"></i> 
 
       </a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

来源

2016-11-20 19:19:18 Turnip

谢谢，这里工作正常。但是，当我复制和过去确切的解决方案代码时，在我的应用程序中，数字“2016”与第二个按钮对齐，而不是按钮之间。任何想法，有什么可以使差异？ –

使用您的浏览器开发工具来检查包含“2016”的元素并查看应用的CSS。我猜想你的CSS中有'text-align：right'。或者，也许你有一个祖先的课文“正确的”？ – Turnip

其他答案中没有提到的另一个选择是，您可以将display包装div的属性（类别.btn-group）设置为flex。它比内联块有一些优势。例如，如果您的中心元素大于边元素，则可以使用align-items: center对齐边元素。

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="btn-group" style="display: flex;"> 
       <div class="btn btn-primary"> 
        <i class="fa fa-chevron-left"></i> 
       </div> 
       <div>2016</div> 
       <div class="btn btn-primary"> 
        <i class="fa fa-chevron-right"></i> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

来源

2016-11-20 19:34:11

避免换行符引导按钮组

回答

相关问题