在html / css / bootstrap 3中将按钮 - 图标与按钮对齐？ [英] Align button - icon with button in html/css/bootstrap 3?

问题描述

我在我的项目中使用Bootstrap 3。
这是我的html页面：

正如您可以注意到的那样，该星不符合下面的查看详情按钮。
这是我的html代码

 < div class =col-6 col-sm-6 col-lg -4\" > 
< h3> 2000 Cadillac Eldorado Esc（展望高度）$ 3500< / h3> 
< p>< small>干净的eldorado仅需123000英里的新鲜调整，无需任何成人驱动，非常可靠，且照顾得当...< / small>< / p> 
< p> 
< a class =btn btn-defaulthref =/ search / 1799 / detail /role =button>查看详情& raquo;< / a> 
< button type =buttonclass =bookmarkid =1799>< span class =
 glyphicon glyphicon-star-empty>< / span>< /按钮> 
< / p> 
 
< / div><！ -  / span  - > 
  

css档案：

  button.bookmark {
 border：none; 
背景：无; 
 padding：0; 
} 
  

解决方案

有很多方法可以实现。我会使用以下其中一项：

选项1 - 与顶部相对的位置

  button.bookmark {
 border：none; 
背景：无; 
 padding：0; 
职位：亲属; 
 top：2px; 
  

}

演示

选项2 - 为按钮指定一个.btn类，使其具有与旁边的.btn相同的布局样式，然后删除左侧和右侧填充

 < button type =buttonclass =btn bookmarkid =1799> 
 
 button.bookmark {
 border：none; 
背景：无; 
 padding-left：0; 
 padding-right：0; 
 
 $ / code> 

编辑：请注意，gylphicon通过Bootstrap获得1的行高度。使用这种技术，我们不希望这样做，因为我们希望它匹配.btn。所以可以重写：



  .btn.bookmark .glyphicon {
 line-height：inherit; 
 vertical-align：middle; 
} 
  

演示

I am using Bootstrap 3 in my project. Here is my html page:

As you can notice, the star is not aligned in line with the view details button below. Here is my html code

<div class="col-6 col-sm-6 col-lg-4">
              <h3>2000 Cadillac Eldorado Esc (Prospect heights) $3500 </h3>
              <p><small>clean eldorado only 123000 miles fresh tune up needs nothing adult driven extremely reliable and well taken care of for ... </small></p>
              <p>
                <a class="btn btn-default" href="/search/1799/detail/" role="button">View details &raquo;</a>
                <button type="button" class="bookmark" id="1799" ><span class="
                  glyphicon glyphicon-star-empty "></span></button>
              </p>

            </div><!--/span-->

css file:

button.bookmark {
  border:none;
  background: none;
  padding: 0;
 }

解决方案

There's a number of ways this can be achieved. I'd use one of the following:

Option 1 - relative position with top

button.bookmark {
  border:none;
  background: none;
  padding: 0;
  position: relative;
  top: 2px;

}

Demo

Option 2 - give the button a .btn class so it has same layout styles as the .btn next to it, then remove left and right padding

<button type="button" class="btn bookmark" id="1799" >

button.bookmark {
  border:none;
  background: none;
  padding-left: 0;
  padding-right: 0;
}

EDIT: Note that the gylphicon gets given a line-height of 1 by Bootstrap. With this technique we don't want that because we want it to match the .btn. So that can be overridden:

.btn.bookmark .glyphicon {
  line-height: inherit;
  vertical-align: middle;
}

Demo

这篇关于在html / css / bootstrap 3中将按钮 - 图标与按钮对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！