0

如何在 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：单击电影海报以启动模态。

4

1 回答 1

0

为了使您的文本不使用省略号，您需要通过包含以下样式来覆盖您的引导 css：

.bootgrid-table td {
  white-space: normal;
}

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

于 2016-01-10T15:52:45.233 回答