3 개의 열로 다중 항목을 작성하고 응답하는 방법

Question

2 개의 항목이 나란히 있고 각 항목에 3 개의 열이있는 레이아웃을 만들고 싶습니다. 첫 번째와 두 번째 열은 고정 너비이고 세 번째 열은 나머지 너비를 채우고 텍스트에 필요한만큼 높이가 높아야합니다. 이 2 개의 나란히있는 항목은 항목 parent div의 50 % 분리입니다. 아래처럼.

------------------------------------------- ------------------------------------------- 
| col1 | col2 | col 3 with copy that wraps | | col1 | col2 | col 3 with copy that wraps | 
|    when there is lots of text | |    when there is lots of text | 
|    in this column    | |    in this column    | 
------------------------------------------- ------------------------------------------- 

또는 같은

는 부모 DIV이 가까이하지만 난 정말 텍스트의 3 열 너비 비율을 사용하지 않으

-------------------------------- -------------------------------- 
| col1 | col2 | col 3 with copy | | col1 | col2 | col 3 with copy | 
|    that wraps when | |    that wraps when | 
|    there is lots of | |    there is lots of | 
|    text in this  | |    text in this  | 
|    column   | |    column   | 
-------------------------------- -------------------------------- 

작은 경우. 당신은 부트 스트랩 사용하는 경우

https://jsfiddle.net/fractorr/htzyLupz/4/

Answer 1

, 당신은 각 행은 col-md-12 고려해야합니다 측

<div class="row"> 
    <!-- first item --> 
    <div class="col-md-6"> 

     <div class="row"> 
      <!-- make column inside the outer column --> 
      <div class="col-md-3"> 
       <!-- col1 --> 
      </div> 
      <div class="col-md-3"> 
       <!-- col2 --> 
      </div> 
      <div class="col-md-6"> 
       <!-- col 3 with wording --> 
      </div> 

     </div> 

    </div> 

    <!-- second item --> 
    <div class="col-md-6"> 

     <div class="row"> 
      <!-- make column inside the outer column --> 
      <div class="col-md-3"> 
       <!-- col 1 --> 
      </div> 
      <div class="col-md-3"> 
       <!-- col 2 --> 
      </div> 
      <div class="col-md-6"> 
       <!-- col 3 with wording --> 
      </div> 

     </div> 

    </div> 

</div> 

에 의해 레이아웃 측면을 만들기 위해 열 분할 방법을 사용할 수 있습니다. 열 크기를 조정하여 열 크기를 어떻게 사용할지 계획하십시오. 12 최대입니다. 반은 6 등입니다. 희망이 당신을 도울 것입니다.