投票箭头，如 bootstrap 的堆栈溢出，如何减小字形图标项目的大小并使它们更紧

Question

你好，我正在尝试实现像堆栈溢出这样的投票系统，我已经完成了后端//整个功能，但是我在 UI 中显示它们时遇到问题。现在，箭头看起来相距太远，数字也不是很居中。另外，如果可能的话，我希望在 clicked/unclicked 时切换箭头的颜色。我试过这个，但总是搞砸 UI。有人可以帮我吗？先感谢您。

<td class="vert-align">
          <div>
       <a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
  <span class="glyphicon glyphicon-triangle-top" style="" aria-hidden="true"></span></a> 
            <br /> //upper arrow

<span class="number"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span>     <br> //number gets displayed here

<a href="/post/{{ post.slug }}/vote?is_up=0"  class="vote">
<span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span></a>
        </div> //under arrow
          </td>

我还有一个js文件用于这次投票

function vote(node) {
    var thread_id = node.attr("href").split('\/')[2];
    $.ajax({
        url: node.attr("href"),
        dataType: "json",
        success: function(data) {
            $("#vote_count_"+thread_id).html(data.count);
        },
        error: function(data) {
            alert(data.responseJSON.error_message);
        }
    });
}

$("a.vote").on("click", function() {
    vote($(this));
    return false;
});

谢谢。

Answer 1

我会创建一个 CSS class 并将其添加到你的字形所在的 '' 标签中。在这个 class 中你可以设置 'font-size' 这将调整你的 iccn 大小。您还应该能够调整填充，我认为您的问题是渲染不正确。如果这没有帮助，您将不得不在浏览器上使用开发人员工具，看看您需要调整填充的位置。

最后要做的是设置你的活动，悬停并关注你的标签，但使用 class。如果你以前从未用 CSS 做过这件事，那就是这样的。

.customClass > a:active, a:hover, a:focus{
  color:#fff
}

希望这对您有所帮助。如果您需要更多详细信息，请告诉我，但这应该是让它正常工作所需的全部内容。

Answer 2

要使用 bootstrap 实现此设计（我可以看到您正在使用），您只需使用此模板即可：

<div class="row">            
    <div class="col-md-1" style="font-size: 30px; color:#606060; text-align: center;">
        <span class="glyphicon glyphicon-triangle-top col-md-12"></span>
        <span class="col-md-12">0</span><!-- Number goes here -->
        <span class="glyphicon glyphicon-triangle-bottom col-md-12"></span>
    </div>
</div>

如果您想在单击时切换箭头颜色，请使用 Javascript 方法，该方法使用 var（布尔值）来确定按钮是否被单击，然后使用 jQuery 方法。 css() 你可以改变想要的按钮的颜色。

实例 - http://www.bootply.com/6KzWhJefif

投票箭头，如 bootstrap 的堆栈溢出，如何减小字形图标项目的大小并使它们更紧

voting arrows like stack overflow with bootstrap, how do I reduce the size of glyph-icon items and bring them tighter

html

javascript

css

ajax

jquery