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

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