나는 테스트 중이다 Twitter Bootstrap을 하고 있으며 행이있는 기본 스캐 폴딩에 붙어 있습니다. 나는 그들의 문서를 여러 번 다시 방문했고 기본적으로 열 내에서 열을 중첩 할 수있는 중첩 열을 볼 수 있지만 행을 하나로 결합하는 기능을 찾을 수없고 결합되지 않은 행 옆의 열과 정렬되도록 할 수 없습니다.
아래 그림은 내가 성취하고 싶은 것을 보여줄 것입니다.
내가 만난 유일한 해결 방법은 테이블을 사용하는 것이지만 응답 성이 테이블 사용으로 작동하지 않는다는 것이 내 견해 이므로이 아이디어가 마음에 들지 않습니다.
누구든지 이것에 대한 우아한 해결책이 있습니까? 내가하는 대부분의 웹 레이아웃은 미세한 유연성이 필요하므로 여기서 유용한 것을 선택할 수 있다면 좋을 것입니다.
답변:
Div는 기본적으로 수직으로 쌓이므로 열 내에서 "행"을 특별히 처리 할 필요가 없습니다.
div {
height:50px;
}
.short-div {
height:25px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h1>Responsive Bootstrap</h1>
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
<div class="short-div" style="background-color:green">Span 2</div>
<div class="short-div" style="background-color:purple">Span 2</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="short-div" style="background-color:#999">Span 6</div>
<div class="short-div">Span 6</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
</div>
</div>여기 에 바이올린이 있습니다.
1row=25px, 2row=50px. 스팬 div를 전체 행만큼 높게 만들 수 있습니까? 추가를 시도 .row{height:100%;}했지만 가지 않았습니다.
부트 스트랩 열 중첩을 사용해야합니다.
Bootstrap 3 또는 Bootstrap 4를 참조하십시오 .
<div class="row">
<div class="col-md-5">Span 5</div>
<div class="col-md-3">Span 3<br />second line</div>
<div class="col-md-2">
<div class="row">
<div class="col-md-12">Span 2</div>
</div>
<div class="row">
<div class="col-md-12">Span 2</div>
</div>
</div>
<div class="col-md-2">Span 2</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">Span 6</div>
<div class="col-md-12">Span 6</div>
</div>
</div>
<div class="col-md-6">Span 6</div>
</div>http://jsfiddle.net/DRanJ/125/
(Fiddle 화면에서 테스트 화면을 확대하여 결과를 확인합니다. col- md- *를 사용하고 있고 반응 형 스택 열을 사용하고 있기 때문입니다. )
참고 : BS2가 열 중첩을 허용하는지 확실하지 않지만 Paul Keister의 대답에서는 열 중첩이 사용되지 않습니다. 당신은 그것을 사용하고 부트 스트랩이 잘하는 동안 CSS를 재발 명하는 것을 피해야합니다.
열 높이는 자동입니다. 두 번째 줄을 추가하면 (예 에서처럼) 열 높이가 자동으로 조정됩니다.
-md-반응 형 규칙 때문 입니다. 예상 결과를 보려면 화면을 확대해야합니다. 당신이 작은 화면에 열로 표시에 스팬이 필요하면 교체 -md-에 의해 -sm-또는 -xs-. 이것은 중단 점 질문입니다 ( bootstrapdocs.com/v3.0.3/docs/css/#grid 참조 ).
참고 : 이것은 Bootstrap 2를위한 것입니다 (질문을했을 때와 관련이 있음).
를 사용 row-fluid하여 기존 .NET 내부에 유동 (백분율) 기반 행을 만들어 이를 수행 할 수 있습니다 block.
<div class="row">
<div class="span5">span5</div>
<div class="span3">span3</div>
<div class="span2">
<div class="row-fluid">
<div class="span12">span2</div>
<div class="span12">span2</div>
</div>
</div>
<div class="span2">span2</div>
</div>
<div class="row">
<div class="span6">
<div class="row-fluid">
<div class="span12">span6</div>
<div class="span12">span6</div>
</div>
</div>
<div class="span6">span6</div>
</div>다음은 JSFiddle 예제입니다. 입니다.
row-fluid첫 번째 이후의 내부 범위에 대해 나타나는 (또는 나타나지 않는) 이상한 왼쪽 여백이 있음을 알았습니다 . 이 문제는 약간의 CSS 조정으로 해결할 수 있습니다 (첫 번째 자식에 적용되는 동일한 CSS, 첫 번째 자식 이후의 CSS로 확장 됨).
.row-fluid [class*="span"] {
margin-left: 0;
}row-fluid내부 행을 분할 할 때가되었을 때 잊지 마세요 .
이것을 확인하십시오. 그것이 당신을 위해 온전히 도움이되기를 바랍니다.
.row-fix { margin-bottom:20px;}
.row-fix > [class*="span"]{ height:100px; background:#f1f1f1;}
.row-fix .two-col{ background:none;}
.two-col > [class*="col"]{ height:40px; background:#ccc;}
.two-col > .col1{margin-bottom:20px;}바울의 대답은 부트 스트랩의 목적을 무너 뜨리는 것 같습니다. 뷰포트 / 화면 크기에 반응하는 것입니다.
행과 열을 중첩하면 응답 성을 유지하면서 동일한 결과를 얻을 수 있습니다.
다음은이 문제에 대한 최신 응답입니다.
<div class="container-fluid">
<h1> Responsive Nested Bootstrap </h1>
<div class="row">
<div class="col-md-5" style="background-color:red;">Span 5</div>
<div class="col-md-3" style="background-color:blue;">Span 3</div>
<div class="col-md-2">
<div class="row">
<div class="container" style="background-color:green;">Span 2</div>
</div>
<div class="row">
<div class="container" style="background-color:purple;">Span 2</div>
</div>
</div>
<div class="col-md-2" style="background-color:yellow;">Span 2</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="container" style="background-color:yellow;">Span 6</div>
</div>
<div class="row">
<div class="container" style="background-color:green;">Span 6</div>
</div>
</div>
<div class="col-md-6" style="background-color:red;">Span 6</div>
</div>
</div>여기에서 코드 펜을 볼 수 있습니다 .
div {
height:50px;
}
.short-div {
height:25px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h1>Responsive Bootstrap</h1>
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
<div class="short-div" style="background-color:green">Span 2</div>
<div class="short-div" style="background-color:purple">Span 2</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="short-div" style="background-color:#999">Span 6</div>
<div class="short-div">Span 6</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
</div>
</div>