부트 스트랩의 적절한 테이블 정렬이 없음

데스크톱, 태블릿 및 모바일을 존중하기 위해 부트 스트랩을 사용하여 응용 프로그램을 개발하려고합니다. 부트 스트랩의 적절한 테이블 정렬이 없음

은 현재 내가 친절하게 내가 실수를하는 곳 알려주세요, 테이블 응답 내가 스크린 샷과 코드를 제공 한 아래

에 문제에 직면하고있다.

두 번째 스크린 샷에서 두 번째 이미지가 응답성에 정렬되지만 다른 이미지에는 정렬되지 않는 것을 볼 수 있습니다.

스크린 샷 1 :: 모바일

enter image description here

CODE :

01에

enter image description here

스크린 샷 2 :: 완벽하지 태블릿에 완벽한 정렬 여기 23,516,

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>Fixed Top Navbar Example for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="js/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="js/libs/bootstrap/customcss/navbar-fixed-top.css" rel="stylesheet"> </head> <body> <!-- Fixed navbar --> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project Title</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Mission <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Request <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="../navbar/">Default</a></li> <li><a href="../navbar-static-top/">Static top</a></li> <!--li class="active"><a href="./">Fixed top</a></li --> </ul> </div><!--/.nav-collapse --> </div> </div> <div class="container"> <!-- Main component for a primary marketing message or call to action --> <div class="jumbotron"> <h1>Project Title</h1> <p></p> <p></p> <p> <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a> </p> </div> <div class="row"> <div class="col-md-12"> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> <div class="col-md-12"> <table class="table table-bordered table-condensed files" border="1"> <thead> <tr> <th>Emp Id</th> <th>Emp Name</th> <th>Start Date</th> <th>End Date</th> <th>Days</th> <th>Status</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>123456</td> <td>Employee First & Last Name</td> <td>04/DEC/14</td> <td>30/JAN/15</td> <td>35</td> <td> <button type="button" class="btn btn-success"> <i class="glyphicon glyphicon-ok-sign"></i> <span>Validated</span> </button> </td> <td> <button type="button" class="btn btn-warning"> <i class="glyphicon glyphicon-question-sign"></i> <span>Pending</span> </button> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> <!-- /container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="js/libs/jQuery/js/jquery-2.0.3.js"></script> <script src="js/libs/bootstrap/js/bootstrap.min.js"></script> </body> </html>

출처

2014-12-01 Arun

는 '바이올린 노력하고 있습니다 http://jsfiddle.net/52VtD/9293/

<div class="container"> 

     <!-- Main component for a primary marketing message or call to action --> 
     <div class="jumbotron"> 
     <h1>Project Title</h1> 
     <p></p> 
     <p></p> 
     <p> 
      <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a> 
     </p> 
     </div> 


     <div class="row"> 
     <div class="col-md-12"> 
      <div class="panel panel-warning"> 
      <div class="panel-heading"> 
       <h3 class="panel-title">Panel title</h3> 
      </div> 
      <div class="panel-body"> 

       <div class="table-responsive"> 
     <table class="table table-bordered"> 
      <thead> 
       <tr> 
        <th>Row</th> 
        <th>First Name</th> 
        <th>Last Name</th> 
        <th>Email</th> 
        <th>Biography</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>1</td> 
        <td>John</td> 
        <td>Carter</td> 
        <td>[email protected]</td> 
        <td> 
         <button type="button" class="btn btn-warning"> 
          <i class="glyphicon glyphicon-question-sign"></i> 
           <span>Pending</span> 
          </button>  
        </td> 
       </tr> 
       <tr> 
        <td>2</td> 
        <td>Peter</td> 
        <td>Parker</td> 
        <td>[email protected]</td> 
        <td> 
         <button type="button" class="btn btn-warning"> 
          <i class="glyphicon glyphicon-question-sign"></i> 
           <span>Pending</span> 
          </button>  
        </td> 
       </tr> 
       <tr> 
        <td>3</td> 
        <td>John</td> 
        <td>Rambo</td> 
        <td>[email protected]</td> 
        <td> 
         <button type="button" class="btn btn-warning"> 
          <i class="glyphicon glyphicon-question-sign"></i> 
           <span>Pending</span> 
          </button>  
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 

      </div> 
      </div> 

     </div> 
     </div>

출처

2014-12-01 08:10:36

그러나 이것은 우리가 긴 테이블의 경우에는 응답을 할 수있는 유일한 방법이다? – Arun

당신은 문제가 버튼에 있습니다, 나는 응답 버튼을 만들려고 고쳐졌습니다 –

부트 스트랩의 적절한 테이블 정렬이 없음

답변

관련 문제