Bootstrap Material Design 表格对齐问题答案

【问题标题】：Bootstrap Material Design table alignment issuesBootstrap Material Design 表格对齐问题
【发布时间】：2017-05-08 21:49:42
【问题描述】：

对于我正在使用Bootstrap Material Design 并且很难将元素排成一行的网站（course.name 和course.update、course.delete 按钮）。

我希望它们与 CSS 垂直对齐，但 vertical-align:middle 不起作用。 <tr valign="middle"> 也没有。

感谢任何帮助。

{% if course_list %}
    <table class="table table-hover">
        <tr>
            <th>Course Name</th>
        </tr>
        {% for course in course_list %}
            <tr>
                <td><a class="text-nowrap" href="{% url "courses.detail" course.id %}">{{ course.name }}</a>
                    {% if course.instructor == user %}
                        <div class="pull-right">
                            {% url 'courses.update' pk=course.id as url %}
                            {% bootstrap_button button_type='link' content='Edit' button_class='btn-warning' href=url %}
                            {% url 'courses.delete' pk=course.id as url %}
                            {% bootstrap_button button_type='link' content='Delete' button_class='btn-danger' href=url %}
                        </div>
                    {% endif %}
                </td>
            </tr>
        {% endfor %}
    </table>

【问题讨论】：

标签： html css bootstrap-material-design

【解决方案1】：

首先你的表没有响应，让它响应做这样的结构

<div class="table-responsive">
        <table class="table table-bordered table-striped">
       //rest of your code
         </table>
     </div>

它会让你的表响应和

.table td {
   text-align: center;   
}

或

<td class="text-center">some text</td>

居中对齐

【讨论】：