jquery - 如何在 Bootstrap 中使用不使用 CSS 的数据表头和数据居中？

Question

我开始学习 asp.net mvc4 和 bootstrap 到目前为止我设法创建了这个数据表。我正在使用 mvc4 的当前默认 CSS Site.css。如果不修改 css，我如何将数据表的标题 (Name) 和数据 (A B C D) 居中？如果不可能如何在 CSS 中编辑它？我只有 css

的基本知识

这是我的 JS 代码

var globalPersonId = 1;
var dataTablesOrderedList = "";
$(document).ready(function () {

var dataTablesFirstBS = $('#dataTables-FIrstSample').DataTable({
    responsive: true,
    processing: true,
    info: true,
    search: true,
    stateSave: true,
    order: [[1, "asc"]],
    lengthMenu: [[50, 100, 200, -1], [50, 100, 200, "All"]],
    ajax: { "url": "/BS/GetFirstDataTable" },
    columns:
    [
        { data: "BSId", title: "", visible: false, searchable: false, sortable: false },
        { data: "Name", title: "Name", sClass: "alignCenter", sortable: false },
        {
            data: "ActionMenu", title: "Sample Button", width: "100px", sAlign: "alignCenter", searchable: false, orderable: false, sClass: "alignCenter",
            "mRender": function (data) {
                return '<button type="button" class="btn btn-info btn-xs action" id="btnAddToCart_' + data + '"><i class="glyphicon glyphicon-cutlery glyphicon-fw action"></i></button>';
            }
        }
    ]
});

//    MyFirstBS();
function MyFirstBS() {

    dataTablesOrderedList = $('#tblMyFirstBS').DataTable({
        responsive: true,
        processing: true,
        info: true,
        retrieve: true,
        destroy: true,
        search: true,
        stateSave: true,
        lengthMenu: [[5, 10, 20, -1], [5, 10, 20, "All"]],
        ajax: {
            "url": "/BS/GetFirstDataTable",
            "data": function (d) {
                d.BSId = globalPersonId;
            }
        },
        columns:
    [
        { data: "BSId", title: "", visible: false, searchable: false, sortable: false },
        { data: "Name", title: "Name", searchable: false, sortable: false }
    ]
    });
   }
  });

Answer 1

使用 CSS 是设置 HTML 样式的最佳/首选方式。

对于水平文本对齐，Bootstrap 有一些辅助 CSS 类:

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

来源:http://getbootstrap.com/css/#type-alignment

对于表格单元格对齐，您可以创建自己的辅助 CSS 类并使用它们:

.text-top {
  vertical-align: top;
}
.text-middle {
  vertical-align: middle;
}
.text-bottom {
  vertical-align: bottom;
}

或者，您可以将自定义 CSS 类添加到数据表中:

<table class="example-class"> ... </table>

然后用它来设置单元格的样式:

.example-class th {
  vertical-align: middle;
}
.example-class td {
  vertical-align: top;
}