Question

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

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

我无法在片段中看到，当我重现错误时，我没有看到您在图片中添加了太多差异，还需要进行一点改动。

这是一个更清晰的视图链接。 Link

 .btnbtn {
   padding: 0px !important;
 }

 .glyphbtn {
   top: 0px !important;
 }

工作示例;

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

类.btn中的padding-top和-bottom需要被覆盖为0px;需要增加字体，直到整个按钮返回到以前的大小。在.glyphicon中，top必须归零。最后，在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;
}

带有glyphicon的Bootstrap按钮

2 个答案: