Question

我有一个引导按钮组，其中包含按钮之间的文本：

＆＃13;

@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');

＆＃13;

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

＆＃13;

如何避免换行符，以便按钮和文本在一行中对齐？

Answer 1

您需要在线显示它们，如：

＆＃13;

@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');

＆＃13;

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

＆＃13;

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

Answer 2

div是块元素。将您的按钮更改为<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>

避免引导按钮组

2 个答案: