我正在寻找两个按钮之间带有“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 的样式,但效果也不是很好。 感谢您的帮助。
最佳答案
你可以使用伪类来达到这个效果:
演示: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;
}
确保使用更具体的选择器以避免其他元素受到影响
关于html - 修改bootstrap组的按钮样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33208341/