模态中的文本与Bootgrid未正确对齐

时间:2016-01-10 13:48:11

标签: javascript jquery css twitter-bootstrap jquery-bootgrid

如何在Bootgrid上的Bootstrap中正确对齐文本?目前所有在一条线上,没有包裹。 这是我的JavaScript代码:

$(document).ready(function() {
$("#grid-data").bootgrid({
caseSensitive: false,
rowCount: [25, 50],
formatters: {
  "poster": function(column, row) {
    return "<img src=\"http://image.tmdb.org/t/p/w500" + row.poster + "\" height=\"182\" width=\"138\" class=\"btn btn-xl btn-default command-modal\" data-toggle=\"modal\" data-target=\"#" + row.id + "\" ><div class=\"modal fade\" id=\"" + row.id + "\" role=\"dialog\" tabindex=\"-1\" aria-labelledby=\"gridSystemModalLabel\"><div class=\"modal-dialog \" role=\"document\"><div class=\"modal-content\"><div class=\"modal-header\"><h4 class=\"modal-title\">" + row.movie + " (" + row.year + ")" + "</h4></div><div class=\"modal-body\">" + row.plot + "</div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button></div></div></div></div>"
  },
  "link": function(column, row) {
    return "<a class=\"btn btn-xl btn-default\" href=\"http://imdb.com/title/" + row.id + "\" target=\"_blank\">" + row.id + "</a>";
  },
}
}).on("loaded.rs.jquery.bootgrid", function() {
$(this).find(".command-modal").click(function(e) {
  $($(this).attr("data-target")).modal("show");
});
});
});

我已准备好JSFiddle:点击电影海报以启动模式。

1 个答案:

答案 0 :(得分:0)

要使文本不用省略号包装,您需要通过包含以下样式来覆盖引导程序css:

class Jewellery 
{
     public string Name { get; set; }
     ......

     public Jewellery(string name) 
     {
          Name = name;
     }
}

这将导致:https://jsfiddle.net/mrh03oaL/