2017-05-08 2 views
0

웹 사이트의 경우 Bootstrap Material Design을 사용하고 행을 정렬하는 데 어려움을 겪고 있습니다 (course.namecourse.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> 

답변

0

.table td { 
    text-align: center; 
} 

또는

<td class="text-center">some text</td> 
을가 반응하게이

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

같은 구조를 할 수는 테이블이 반응 할 것하고, 응답하지

정렬 된

관련 문제