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

这就是你想要做的吗？设置 padding: 0px !important;

我无法在代码片段中看到这一点，当我重现错误时，我没有看到您在图像中添加的太大差异，需要再做一点小改动。

这里有一张link，视野更清晰。 Link

 .btnbtn {
   padding: 0px !important;
 }

 .glyphbtn {
   top: 0px !important;
 }

工作示例；

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

 .btnbtn {
   padding: 0px !important;
   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;
   top: 0px !important;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://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>

Answer 2

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

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

Bootstrap 个带字形的按钮

Bootstrap buttons with glyphicon

css

asp.net

button

twitter-bootstrap

glyphicons