twitter-bootstrap - 评分框不会与行对齐

Question

我正在使用 bootstrap 4 尝试制作一个受 IGN 启发的游戏网站。我使用脚本填写一系列行，这些行在表格行的红色框中显示游戏的标题、发布日期和评级。出于某种奇怪的原因，它并没有完全对齐，这就是我得到的：

那么，我如何让它正确排列，所以 9.8 在 Fallout 4 行中，在两条线之间，而不是被顶线刺穿？这是我使用的脚本：

        function fillTables (){
      $.get("/api/tables", function(data) {
        console.log(data);

for (var i = 0; i < data.length; i++) 
        {
          $(".container").append("<div class = 'row'> <div class = 'col-md-10'><p style = 'font-size: 24px'>" + data[i].title + "</p>" + data[i].rel.substring(0, 10) + "</div><div class = 'col-md-2'>" + "<span class = 'mainRating'>" + data[i].rating + "</span></div></div>");
    }

这是我的风格标签：

    <style>

.row
{
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-width: 2px;
    border-top-width: 2px;
}

.mainRating
{
    padding: 20px;
    margin: 5px;
    background-color:red;

}

.container
{
    width: 80%;
    /*adjust this based on screen size.  Big screens its 70%, medium screens its 80%, small screens its 100%*/
}

.card
{
    width: 400px;
}
</style>

标签： twitter-bootstraplayoutbootstrap-grid

Answer 1

这是因为那些<span>s 是内联元素。尝试将它们变成<div>s 或添加到您的 CSS 中：

.mainRating {
  display: block;
}