带分隔线的引导按钮答案

【问题标题】：Bootstrap button with divider带分隔线的引导按钮
【发布时间】：2012-09-03 05:15:01
【问题描述】：

我想创建一个带有分隔线的引导按钮。

在分隔线的左侧，按钮文本将与左侧对齐。在分隔线的右侧，将有一个与中心对齐的加/减图标。分隔线将始终放置在距离按钮右侧 33px 的位置。分隔线将变为白色。

创建这种效果的最佳技术是什么？（我更喜欢使用 css 和字体而不是图像）。

我无法上传示例图片，因为我没有足够的声誉，但我希望你明白 :)

感谢您的帮助！

【问题讨论】：

任何 url 或任何 jsfiddle .. 我没有完全得到你的问题
这似乎是个坏主意。您生成的按钮看起来像一个名为拆分按钮的现有引导控件（twitter.github.com/bootstrap/components.html#buttonDropdowns 在该链接之后向下滚动页面）。添加这个，当拆分按钮已经存在时，会让用户感到困惑。他们会在此（或拆分按钮）上看到垂直分隔线，并且他们会期望根据他们单击按钮的哪一侧执行不同的操作。

标签： css web-applications twitter-bootstrap

【解决方案1】：

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

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

结果图片：

【讨论】：

【解决方案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>

然后覆盖颜色。

【讨论】：

想了想。问题是我不会将它作为两个不同的按钮，而是作为一个按钮。我正在考虑放置一个内部跨度，该跨度将包含其左边框并为其着色以创建线条效果（使用填充放大到边缘）
我最终使用了另一种技术，正如我在回答中提到的那样。但是感谢您的帮助！

【解决方案3】：

我在这里使用 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

图片预览：

【讨论】：

【解决方案4】：

试试这个

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 作为图标。

【讨论】：