Question

我正在寻找一个带有＆＃39; OR＆＃39;在两个按钮之间。我正在使用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;
}

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

Answer 2

首先对HTML进行一点改动：

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

CSS：

.btn-group button {
    border:0;
    width: 70px;
}
.btn-group .btn-default {
    background: #EEE;
    border-right: 2px solid #FFF;
}
.btn-group .btn-default:hover {
    background: #DDD;
}
.btn-group .btn-success {
    border-left: 2px solid #FFF;
}
.btn-or {
    position: absolute;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #FFF;
    width:20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    left: 50%;
    top: 50%;
    margin: -10px 0 0 -10px;
    z-index: 1000;
    font-size: 12px;
}

http://jsfiddle.net/czr6tohj/1/

修改bootstrap组的按钮样式

2 个答案: