행을 결합하는 부트 유효성 (행 범위)

행을 결합하는 부트 유효성 (행 범위)

---

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>

여기 바이올린이 있습니다.

---

부트한다면 열 중첩을합니다.

부트 유효성 3 또는 부트 유효성 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를 재발 명하지 않습니다.

열 높이는 자동이며 두 번째 줄을 추가하면 (예에서와 같이) 열 높이가 자동으로 조정됩니다.

---

참고 : 이것은 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이며 첫 번째 자식 이후로 확장 됨).

.row-fluid [class*="span"] {
    margin-left: 0;
}

---

이것을 확인하십시오. 그것이 당신을 위해 충분히 도움이되기를 바랍니다.

http://jsfiddle.net/j6amM/

.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>

참고 URL : https://stackoverflow.com/questions/16351404/bootstrap-combining-rows-rowspan