html - 修改bootstrap组的按钮样式

Question

我正在寻找两个按钮之间带有“OR”的按钮组。我正在为此使用 Bootstrap 。

<div class="btn-group" role="group" >
  <button type="button" class="btn btn-default">Cancel</button>
  <button type="button" class="btn btn-default">or</button>
  <button type="button" class="btn btn-success">Save</button>
</div>

输出看起来像这样:

如何将这段代码输出成这样:

我尝试设计中间按钮 border-radius 的样式，但效果也不是很好。感谢您的帮助。

Answer 1

你可以使用伪类来达到这个效果:

演示:http://jsfiddle.net/GCu2D/913/

HTML:

<div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Cancel</button>
    <button type="button" class="btn btn-success">Save</button>
</div>

CSS:

.btn {
    width:80px;
}
.btn-default {
    position:relative;
    background:#f0f0f0;
}
button.btn.btn-default:before {
    content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    border: 2px solid #fff;
    right: -2px;
    z-index: 10;
    height: 100%;
}
button.btn.btn-default:after {
    content:"or";
    position: absolute;
    right: -10px;
    border-radius: 100%;
    padding: 0 4px;
    background: #FFF;
    color: grey;
    z-index: 10;
    text-align: center;
}

确保使用更具体的选择器以避免其他元素受到影响