删除按钮的弯曲边缘并调整面板的文本

Question

JS FIDDLE DEMO

我已经尝试了一切我能想到的去除顶部和底部按钮的弯曲边缘但是它们不起作用。我试过这个：

.btn {
    border-radius: 0;
    font-size:25px;
    padding:0;
}

但这只会删除部分弯曲边缘，前后：

还有一个是面板，我试图设置面板的高度，但现在文本没有水平和垂直放置中心：

.panel-title {
    height:8px !important;
}

如何解决这两个问题？非常感谢！

P / s：既然我在问，我也很想听你的意见，或者可以帮助我让网站看起来像这样的提示：https://www.behance.net/gallery/6355085/dashboard-analytics。我按照这个想法创建网站，但我想我错过了一些东西，因为我看起来像一团糟:(

Answer 1

添加此

.btn-group-vertical>.btn:first-child:not(:last-child) {
   border-top-right-radius: 0px;
}

DEMO

Answer 2

检查你引导程序中的第一个和最后一个孩子。这是你的小提琴。

 .btn-group-vertical > .btn:first-child:not(:last-child) {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }

你可以看到有一个边界半径。尝试使用代码检查器或类似的东西来查看应用于元素的类

Answer 3

如果您不想在每个地方删除半径，请将!important添加到 css 。

小提琴：http://jsfiddle.net/ettmujvg/20/

Css ：

body {
    background-color:#444444;
}

.panel{
    border-radius: 0 !important;   // <--- HERE
}
.btn {
    border-radius: 0  !important;   // <--- HERE
    font-size:25px;
    padding:0;
}

.btntext{
    padding:0;
    font-size:14px !important;
    font-weight:bold;
}
.btn-default {
        color:black !important;
}
.btn-custom {
    width: 100px !important;
    margin-top:0px !important;
    background-image:linear-gradient(to right, #FFF 0px, #E0E0E0 100%) !important;
}

.btn-custom a{
    color:#333 !important;
}

.pHeader-panel {
    margin-bottom : 0px;
    height:25px;
    text-align:center;
    background-image:linear-gradient(to left, #FFF 0px, #E0E0E0 100%) !important;
}

.panel-heading {
    background-image:linear-gradient(to top, #FFF 0px, #E0E0E0 100%) !important;
}


.panel-title {
    height:8px !important;
}

#pHeader
{
    position: fixed; 
    width: 100%; 
    top:0px;
}

#pLeftMenu {
   position: fixed;
   top: 25px;
}

#pBody {
    margin-top:30px;
    margin-left:105px; 
    padding-right:8px;
}

#halfHorizontalPanel {
    margin-left:0px; 
    margin-right:0px;
    background-color:white;
    border:1px solid;
    min-height:300px;
}

#lefthalfHorizontalPanel{
    margin:8px 0px; 
    margin-right:0px;
    width:49.5%; 
    background-color:white;
    border:1px solid;
    min-height:290px;
    float:left;
}


#righthalfHorizontalPanel{
    margin:8px 0px; 
    width:49.5%;
    background-color:white;
    border:1px solid;
    min-height:290px;
    float:right;
}


.btn-group-vertical-custom
{
    margin-top:0px !important;
}

.tbl-stair {
    border:1px solid;
}