css - 带字形图标的 Bootstrap 按钮

Question

 .txt {
   vertical-align: middle;
   padding-left: 15px;
   padding-right: 15px;
   padding-top: 0px;
   padding-bottom: 0px;
   text-align: center;
 }
 .btnbtn {
   padding: 0px;
   margin-top: 0;
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
   text-align: center;
 }
 .glyphbtn {
   padding-top: 4px;
   padding-bottom: 4px;
   padding-right: 7px;
   padding-left: 7px;
   text-align: center;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http:/ / maxcdn.bootstrapcdn.com / bootstrap / 3.3.5 / js / bootstrap.min.js "></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<a class="btn btn-default btnbtn " href="#">
  <asp:Label ID="Label1" runat="server" Text="Add" CssClass="txt"></asp:Label>
  <span class="btn btn-info glyphicon glyphicon-plus glyphbtn"></span>
</a>

这是我的 Bootstrap 按钮代码。按钮的字形部分的高度与整个按钮的高度不完全一致。填充和边距都已设置为 0。我似乎无法弄清楚如何调整它的高度以完全适合整个按钮。请帮忙谢谢

Answer 1

类.btn中的padding-top和-bottom需要分别改写为0px；字体需要增加，直到整个按钮恢复到以前的大小。在 .glyphicon 中，顶部必须归零。最后，在 firebug 中查看页面后，在 js 文件中有一个填充定义(padding-top:0 和 -bottom:0)导致保留一小段空间。看起来您的“js”css 文件定义了 padding-top 和 -bottom 属性；当我在 Firebug 中删除这些时，所有剩余的空间都被删除了。您可能需要尝试在 padding-top 和 -bottom 属性上使用 !important，这意味着如果您不使用它们，请彻底覆盖其原始类中的填充属性。

.txt {
  vertical-align: middle;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 0px;
  padding-bottom: 0px;
  text-align: center;
}

.btnbtn {
  padding: 0px;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  text-align: center;
}

.glyphbtn {
   padding-top: 4px;
   padding-bottom: 4px;
   padding-right: 7px;
   padding-left: 7px;
   text-align: center;
 }

.btn {
   padding-bottom: 0 !important;
   padding-top: 0 !important;
   font-size: 22px !important;
 }

.glyphicon {
   top: 0 !important;
}