부트 스트랩에서 두 열 사이의 세로 구분선
트위터 부트 스트랩을 사용하고 있으며 두 개의 열 (span6)이있는 행이 있습니다. 두 범위 사이에 세로 구분선을 어떻게 만드나요?
고마워, Murtaza
코드가 다음과 같은 경우 :
<div class="row">
<div class="span6">
</div>
<div class="span6">
</div>
</div>
그렇다면 콘텐츠 보관 / 스타일 지정을 위해 "span6"DIVS 내에서 추가 DIVS를 사용하고 있다고 가정합니다. 그래서...
<div class="row">
<div class="span6">
<div class="mycontent-left">
</div>
</div>
<div class="span6">
<div class="mycontent-right">
</div>
</div>
</div>
따라서 "mycontent-left"클래스에 CSS를 추가하여 구분선을 만들 수 있습니다.
.mycontent-left {
border-right: 1px dashed #333;
}
.row.vertical-divider {
overflow: hidden;
}
.row.vertical-divider > div[class^="col-"] {
text-align: center;
padding-bottom: 100px;
margin-bottom: -100px;
border-left: 3px solid #F2F7F9;
border-right: 3px solid #F2F7F9;
}
.row.vertical-divider div[class^="col-"]:first-child {
border-left: none;
}
.row.vertical-divider div[class^="col-"]:last-child {
border-right: none;
}<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row vertical-divider" style="margin-top: 30px">
<div class="col-xs-6">Hi there</div>
<div class="col-xs-6">Hi world<br/>hi world</div>
</div>여기에 제가 지금까지 사용해온 또 다른 옵션이 있습니다. 주로 시각적으로 분리 된 2 개의 열을 필요로하기 때문에 나를 위해 잘 작동합니다. 또한 반응이 좋습니다. 즉, 중간 및 큰 화면 크기로 나란히 열이있는 경우 col-md-border더 작은 화면 크기에서 구분 기호를 숨기는 클래스를 사용합니다 .
css :
@media (min-width: 992px) {
.col-md-border:not(:last-child) {
border-right: 1px solid #d7d7d7;
}
.col-md-border + .col-md-border {
border-left: 1px solid #d7d7d7;
margin-left: -1px;
}
}
scss에서는 다음과 같이 필요한 모든 클래스를 생성 할 수 있습니다.
scss :
@media(min-width: $screen-md-min) {
.col-md-border {
&:not(:last-child) {
border-right: 1px solid #d7d7d7;
}
& + .col-md-border {
border-left: 1px solid #d7d7d7;
margin-left: -1px;
}
}
}
HTML :
<div class="row">
<div class="col-md-6 col-md-border"></div>
<div class="col-md-6 col-md-border"></div>
</div>
작동 원리 :
열은 다른 열이없는 요소 안에 있어야합니다. 그렇지 않으면 선택기가 예상대로 작동하지 않을 수 있습니다.
.col-md-border:not(:last-child).row 닫기 이전 의 마지막 요소를 제외한 모든 요소 와 일치하고 오른쪽 테두리를 추가합니다.
.col-md-border + .col-md-border이 두 개가 서로 옆에 있고 왼쪽 테두리와 -1px 음의 여백을 추가하는 경우 동일한 클래스의 두 번째 div를 찾습니다. 음수 여백은 어떤 열의 높이가 더 크고 구분 기호가 가장 높은 열과 같은 높이인지 더 이상 중요하지 않은 이유입니다.
또한 몇 가지 문제가 있습니다 ...
- 영리하거나 게으르고 동일한 행 요소 내에서 / 클래스
col-XX-X와 함께 클래스를 사용하려고 할 때 .hidden-XXvisible-XX - 열이 많고 완벽한 픽셀이 필요할 때. n-1 열을 왼쪽으로 1px 이동하기 때문에.
... 그러나 다른 한편으로는 반응이 빠르고 간단한 html에서 잘 작동하며 모든 부트 스트랩 화면 크기에 대해 이러한 클래스를 쉽게 만들 수 있습니다.
한 열의 내용이 더 길 때 구분선이 너무 짧아서보기 흉한 모양을 수정하려면 모든 열에 테두리를 추가합니다. 포지션 차이를 보상하기 위해 다른 모든 열에 마이너스 마진을 제공합니다.
예를 들어, 세 가지 열 클래스 :
.border-right {
border-right: 1px solid #ddd;
}
.borders {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
margin: -1px;
}
.border-left {
border-left: 1px solid #ddd;
}
그리고 HTML :
<div class="col-sm-4 border-right">First</div>
<div class="col-sm-4 borders">Second</div>
<div class="col-sm-4 border-left">Third</div>
Bootstrap의 수평 구분선과 동일한 색상을 원하면 #ddd를 사용해야합니다.
2018 년에도 최상의 솔루션을 찾고 있다면, 하나 이상의 무료 가상 요소 (:: after 또는 :: before)가있는 경우 이것이 완벽하게 작동하는 방식을 찾았습니다.
다음과 같이 행에 클래스를 추가하면됩니다. <div class="row vertical-divider ">
그리고 이것을 CSS에 추가하십시오.
.row.vertical-divider [class*='col-']:not(:last-child)::after {
background: #e0e0e0;
width: 1px;
content: "";
display:block;
position: absolute;
top:0;
bottom: 0;
right: 0;
min-height: 70px;
}
이 클래스가있는 모든 행은 이제 포함 된 모든 열 사이에 세로 구분선이 있습니다.
이 예제 에서 이것이 어떻게 작동하는지 볼 수 있습니다 .
Bootstrap 4에는 border-right사용할 수 있는 유틸리티 클래스 가 있습니다.
예를 들어 다음과 같이 할 수 있습니다.
<div class="row">
<div class="col-6 border-right"></div>
<div class="col-6"></div>
</div>
나는 그것을 테스트했다. 잘 작동합니다.
.row.vdivide [class*='col-']:not(:last-child):after {
background: #e0e0e0;
width: 1px;
content: "";
display:block;
position: absolute;
top:0;
bottom: 0;
right: 0;
min-height: 70px;
}
<div class="container">
<div class="row vdivide">
<div class="col-sm-3 text-center"><h1>One</h1></div>
<div class="col-sm-3 text-center"><h1>Two</h1></div>
<div class="col-sm-3 text-center"><h1>Three</h1></div>
<div class="col-sm-3 text-center"><h1>Four</h1></div>
</div>
</div>
테두리를 보려면 전체 페이지에서 열어야합니다!
CSS에 미디어 너비 절을 추가하여 모바일 친화적 인 측면에 불쾌한 테두리가 없도록했습니다. 도움이 되었기를 바랍니다! 가장 긴 열의 길이로 크기가 조정됩니다. .col-md-4 및 .col-md-6에서 테스트되었으며 내 가정은 나머지와 호환됩니다. 그래도 보장은 없습니다.
.row {
overflow: hidden;
}
.cols {
padding-bottom: 100%;
margin-bottom: -100%;
overflow: hidden;
}
@media(min-width: 992px) {
.col-md-4:not(:first-child),
.col-md-6:not(:first-child) {
border-left: 1px solid black;
}
.col-md-4:not(:last-child),
.col-md-6:not(:last-child) {
border-right: 1px solid black;
margin-right: -1px;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1>
.col-md-6
</h1>
<hr>
<div class="row text-center">
<div class="col-md-6 cols">
<p>Enter some text here</p>
</div>
<div class="col-md-6 cols">
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
</div>
</div>
<hr>
<h1>
.col-md-4
</h1>
<div class="row text-center">
<div class="col-md-4 cols">
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
</div>
<div class="col-md-4 cols">
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
</div>
<div class="cols col-md-4 cols">
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
</div>
</div>
</div>열 공간이 있다고 가정하면 이것은 옵션입니다. 필요한 항목에 따라 컬럼의 균형을 재조정하십시오.
<div class="col-1">
<div class="col-6 vhr">
</div>
</div>
.vhr{
border-right: 1px solid #333;
height:100%;
}
Well what I did was remove the gutter between the respective spans then drawing a left border for the left span and a right border for the right span in such a way that their borders overlapped just to give a single line. This way the visible line will just be one of borders.
CSS
.leftspan
{
padding-right:20px;
border-right: 1px solid #ccc;
}
.row-fluid .rightspan {
margin-left: -0.138297872340425%;
*margin-left: -0.13191489361702%;
padding-left:20px;
border-left: 1px solid #ccc;
}
.row-fluid .rightspan:first-child {
margin-left: -0.11063829787234%;
*margin-left: -0.104255319148938%;
}
HTML
<div class="row-fluid" >
<div class="span8 leftspan" >
</div>
<div class="span4 rightspan" >
</div>
</div>
Try this it works for me
Use this, 100% guaranteed:-
vr {
margin-left: 20px;
margin-right: 20px;
height: 50px;
border: 0;
border-left: 1px solid #cccccc;
display: inline-block;
vertical-align: bottom;
}
참고URL : https://stackoverflow.com/questions/14580346/vertical-divider-between-two-columns-in-bootstrap
'IT박스' 카테고리의 다른 글
| gson.toJson ()에서 StackOverflowError가 발생합니다. (0) | 2020.10.19 |
|---|---|
| 0과 비교할 때 int 연산자! = 및 == (0) | 2020.10.19 |
| Mongoose-exec 함수는 무엇을합니까? (0) | 2020.10.19 |
| 선사 시대 날짜에 Javascript에서 날짜를 사용하는 방법은 무엇입니까? (0) | 2020.10.19 |
| 백그라운드 서비스 및 업데이트 UI에서 ViewModel의 LiveData를 업데이트하는 방법 (0) | 2020.10.19 |