부트 스트랩 - 목록 항목의 격자 레이아웃

Question

부트 스트랩 3을 사용하는 웹 페이지가 있습니다.이 페이지에서 4x 패널 배치 목록을 2x2 그리드에 함께 넣을 수 있습니다. 나는 그리드는 기본적으로 다음과 같습니다하려는 :

+-----+-----+ 
| 1 | 2 | 
| A | B | 
+-----+-----+ 
| 3 | 4 | 
| C | D | 
+-----+-----+ 

내가 그리드 비록 list-group 같은 스타일되어야합니다. 스타일에 따라, 목록 그룹 항목처럼 테두리 스타일과 내부 패딩이 있어야합니다. 나는 한 항목의 항목을 원하지 않는다. 이 Bootply에 나와있는 것처럼 가까이 다가 갈 수 있었지만 그곳에는별로 없습니다. 그리드의 첫 번째 행과 두 번째 행 사이에는 여전히 빈 줄이 있습니다. 그러나 빈 줄을 없애면 행 사이의 테두리가 올바르게 보이지 않습니다. 또한, 내가 사용하고있는 것처럼 width:50%을 사용해야하는지 잘 모르겠습니다.

문제의 내 코드는 다음과 같습니다 :이 레이아웃에 내 접근 방식에서 잘못된 뭐하는 거지

<div class="container"> 
    <div class="list-group list-group-horizontal block" style="width:100%;"> 
    <div class="list-group-item" style="width:50%;"> 
     <h4>Portion 1</h4> 
     <h4><small>This is a description</small></h4> 
    </div> 
    <div class="list-group-item" style="width:50%;"> 
     <h4>Portion 2</h4> 
     <h4><small>This is a description</small></h4> 
    </div> 
    </div> 
    <div class="list-group list-group-horizontal block" style="width:100%;"> 
    <div class="list-group-item" style="width:50%;"> 
     <h4>Portion 3</h4> 
     <h4><small>This is a description</small></h4> 
    </div> 

    <div class="list-group-item" style="width:50%;"> 
     <h4>Portion 4</h4> 
     <h4><small>This is a description</small></h4> 
    </div> 
    </div> 
</div> 

?

Answer 1

:

.list-group-horizontal { 
    margin-bottom: 0; 
} 

는 그런 다음 두 번째 행에있는 항목의 위쪽 테두리를 제거 할 수 있습니다

일반 목록 그룹을 사용할 수 있습니다. 그런 다음 원치 않는 둥근 모서리를 제거하기 위해 CSS를 사용하고 다음 bootply 다른

은 아래 참조 각 스 니펫에 2 목록-그룹의 위치를 ​​: 니펫하지 않는 몇 가지 이유를 들어 http://www.bootply.com/iYq8A9nVZQ

.my-list-group { 
 
    width: 50%; 
 
    display: inline-block; 
 
} 
 
    
 
.left .list-group-item { 
 
    border-top-right-radius: 0px; 
 
    border-bottom-right-radius: 0px; 
 
} 
 

 
.right { 
 
    float: right; 
 
} 
 
    
 
.right .list-group-item { 
 
    border-top-left-radius: 0px; 
 
    border-bottom-left-radius: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="list-group my-list-group left"> 
 
    <div class="list-group-item"> 
 
     <h1>item 1</h1> 
 
     <p>sub</p> 
 
    </div> 
 
    <div class="list-group-item"> 
 
     <h1>item 3</h1> 
 
     <p>sub</p> 
 
    </div> 
 
    </div> 
 
    <div class="list-group my-list-group right"> 
 
    <div class="list-group-item"> 
 
     <h1>item 2</h1> 
 
     <p>sub</p> 
 
    </div> 
 
    <div class="list-group-item"> 
 
     <h1>item 4</h1> 
 
     <p>sub</p> 
 
    </div> 
 
    </div>

Answer 2

당신은 빈 줄 제거 .list 그룹의 기본 마진 - 바닥을 무시할 수 있습니다

.list-group-horizontal + .list-group-horizontal > .list-group-item { 
    border-top: 0; 
}