한 열 자동 너비가있는 부트 스트랩 그리드

Question

부트 스트랩 3을 사용 중이고 각 행에 4 개의 열이있는 항목 목록을 만들려고합니다. bs3 그리드 시스템을 사용하려고했지만 기본적으로,

 
_____________________________________________________________________________ 
|                    | 
|         Container         | 
|Checkbox| Name (130px)| Message          | Date| 
|Checkbox| Name (130px)| Message adasdsadsadsadsadsadasaaaaaaaaaaaaa | Date| 
|Checkbox| Name (130px)| Message adsadsadsadsadsadsadsaaaaaaaaaaaaaa... | Date| 
|Checkbox| Name (130px)| Message          | Date| 
|Checkbox| Name (130px)| Message          | Date| 
|....                   | 
|_____________________________________________________________________________| 

: 열 중 하나는 사용 가능한 모든 공간을 사용할 필요가 있기 때문에 ..

예 내 모든 요구 사항에 맞지 않는 (또는 적어도 나는 그것이 작동 할 수 없습니다) 날짜 열은 항상 오른쪽에 있어야하며 메시지 열은 사용 가능한 모든 너비를 사용해야하며 메시지가 사용 가능한 공간보다 큰 경우에는 잘려야합니다 (또는 오버플로 숨겨진) 부트 스트랩 그리드 주로 당신이 여기 무슨 목적을하고 설계되는 것은 내용를 그리드 기반 것을

Answer 1

주

감사합니다, 일명 테이블. 아래의 조각 같은

뭔가 :

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); 
 
html, 
 
body { 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 
table { 
 
    width: 100%; 
 
    table-layout: fixed; 
 
} 
 
td:first-of-type, 
 
td:last-of-type { 
 
    width: 50px; 
 
} 
 
td:nth-of-type(2) { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<table class="table table-striped"> 
 
    <tr> 
 
    <td>fit</td> 
 
    <td>stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch 
 
     stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch</td> 
 
    <td>fit</td> 
 
    </tr> 
 
    <tr> 
 
    <td>fit</td> 
 
    <td>stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch 
 
     stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch</td> 
 
    <td>fit</td> 
 
    </tr> 
 
    <tr> 
 
    <td>fit</td> 
 
    <td>stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch 
 
     stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch</td> 
 
    <td>fit</td> 
 
    </tr> 
 
    <table>

Answer 2

그런 다음 하나의 큰 열에서 div의 포장 및 수는 그에 display: table-cell을 설정합니다.

바이올린 : http://jsfiddle.net/abhitalks/qan2khse/

발췌문 : 당신은 3 열 같은 구조를 사용할 수 있습니다

div.table { 
 
    border: 1px solid gray; 
 
    border-collapse: collapse; 
 
    display: table; 
 
} 
 
div.cell { 
 
    border: 1px solid gray; 
 
    display: table-cell; 
 
} 
 
div.cell:first-child, div.cell:nth-child(2) { 
 
    width: 10%; 
 
} 
 
div.cell:nth-child(3) { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 

 
div.cell:last-child { 
 
    width: 10%; 
 
    text-align: right; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
      <span>Caption</span> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-12 table"> 
 
      <div class="cell">one</div> 
 
      <div class="cell">two</div> 
 
      <div class="cell">three</div> 
 
      <div class="cell">four</div> 
 
     </div> 
 
    </div> 
 
</div>