带分频器的Bootstrap按钮

Question

我想创建一个带有分隔符的bootstrap按钮。

在分隔符的左侧，按钮文本将与左侧对齐。 在分隔线的右侧，将有一个与中心对齐的加号/减号图标。 分频器将始终位于按钮右侧33px处。 分隔线将为白色。

创造这种效果的最佳技巧是什么？ （我更喜欢在图像上使用CSS和字体。）

我无法上传示例图片因为我没有足够的声誉，但我希望你有这个想法：）

感谢您的帮助！

Answer 1

我最终在按钮内定义了一个span（这是一个标签）。 跨度位于按钮的右侧，包含图标。我将它的左边框涂成白色并给出了正确的填充，这样它就会给图标留出足够的空间并伸展到按钮的顶部。

css代码：

.btn-blue {
    /* Button definintion*/
}

.btn-blue-right-section {
    text-align:center;
    padding: 4px 0 5px 10px;
    margin-left: 10px;
    border-left: 1px solid #86c7fe;
}

.btn-blue-icon {
    color: white;
    width: 13px;
}

结果图片：

Answer 2

http://twitter.github.com/bootstrap/components.html#buttonGroups

<div class="btn-group">
<a class="btn" href="#">Button text</a>
<a class="btn" href="#"><i class="icon-plus"></i></a>
</div>

只需覆盖颜色。

Answer 3

试试这个

HTML

<button type="button" class="btn bg-blue fs-it-btn text-uppercase" aria-label="Left Align">Click me <span class="fs-it-btn-vertical-line"></span><i class="fa fa-plus" aria-hidden="true"></i></button>

CSS

.fs-it-btn {
  margin-top: 10px;
  border: 1px solid #a2a2a2;
  border-radius: 0;
  color: #fff;
  font-weight: bold;
}
.fs-it-btn-vertical-line {
  text-align:center;
  padding: 4px 0 5px 10px;
  margin-left: 10px;
  border-left: 1px solid #a2a2a2;
}
.bg-blue {
    background-color: #2c9deb;
}
.text-uppercase {
    text-transform: uppercase;
}

我使用了fontawesome作为图标。

Answer 4

这里我正在使用glyphicon。

由于bootstrap button有填充，我们必须删除padding并将其移至每个span。

.btn-nopadding{
    padding: 0px;
    font-size: 24px; /* optional */
}
.btn-padding{
    padding: 20px 20px 25px 20px;
}

/* if you want divider to left / logo at right */
.btn-divider-left{
    border-left: 1px solid #1e4d76; /* set your color here */
}

/* if you want divider to right / logo at left */
.btn-divider-right{
    border-right: 1px solid #1e4d76; /* set your color here */
}

这是html

<!-- example for left divider / logo at right -->

<a href="#" class="btn btn-primary btn-lg btn-nopadding">
    <span class="btn-padding">BUTTON NAME</span>
    <span class="glyphicon glyphicon-plus btn-divider-left btn-padding"></span>
</a>

<!-- example for right divider / logo at left -->

<a href="#" class="btn btn-primary btn-lg btn-nopadding">
    <span class="glyphicon glyphicon-plus btn-padding btn-divider-right"></span>
    <span class="btn-padding">BUTTON NAME</span>
</a>

小提琴中的示例：fiddle preview

图片预览：