javascript - Bootgrid 模式中的文本未正确对齐

Question

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

Answer 1

为了让您的文本不被省略号包裹，您需要通过包含这些样式来覆盖您的 Bootstrap css:

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

结果是:https://jsfiddle.net/mrh03oaL/