[html] col-md-1.5를 부트 스트랩에 줄 수 있습니까?

Program / 글쓴이

Twitter Boοtstrap에서 열을 조정하고 싶습니다.

부트 스트랩에는 12 개의 열 그리드가 있습니다. 3 3 3 3 대신 1.5 3.5 3.5 3.5를 갖도록 그리드를 조작하는 방법이 있습니까?

답변

따라 @의 bodi0가 제대로했다 , 그것은 불가능합니다. 부트 스트랩의 그리드 시스템 (다양한 솔루션을 검색하고 찾을 수 있습니다. 여기 에 7 열 예제가 있습니다)을 확장하거나 http://bootply.com/dd50he9tGe와 같은 중첩 된 행을 사용해야 합니다.

중첩 된 행의 경우 항상 정확한 결과를 얻을 수있는 것은 아니지만 비슷한 결과를 얻을 수 있습니다.

<div class="row">
    <div class="col-lg-5">
        <div class="row">
            <div class="col-lg-4">1.67 (close to 1.5)</div>
            <div class="col-lg-8">3.33 (close to 3.5)</div>
        </div>
    </div>
    <div class="col-lg-7">
        <div class="row">
            <div class="col-lg-6">3.5</div>
            <div class="col-lg-6">3.5</div>
        </div>
    </div>
</div>

답변

당신은 또한 단순히 기둥의 너비를 재정의 …

<div class="col-md-1" style="width: 12.499999995%"></div>

col-md-1너비가 8.33333333 % 이기 때문에 ; 8.33333333 * 1.5를 곱하고 너비로 설정하십시오.

에서는 bootstrap 4flex 및 max-width 속성도 재정의해야합니다.

<div class="col-md-1" style="width: 12.499999995%;
    flex: 0 0 12.499%;max-width: 12.499%;"></div>

답변

짧은 대답은 ‘ 아니요’입니다 (기술적으로 원하는 클래스의 이름을 지정할 수 있지만 자체 CSS 클래스를 정의하지 않는 한 효과가 없습니다 . 클래스 선택기에 점이 없음을 기억하십시오 ). 긴 대답은 다시 ‘ 아니요 ‘입니다. Bootstrap에는 장치 또는 뷰 포트 크기가 증가함에 따라 최대 12 개 열까지 적절하게 확장 되는 반응 형 모바일 우선 유동 그리드 시스템이 포함되어 있기 때문 입니다.

적절한 정렬 및 패딩을 위해 행은 .container(고정 너비) 또는 .container-fluid(전체 너비) 내에 배치되어야합니다 .

  • 행을 사용하여 가로 열 그룹을 만듭니다.
  • 콘텐츠는 열 내에 배치되어야하며 열만 행의 직계 자식 일 수 있습니다.
  • .row및 같은 미리 정의 된 그리드 클래스 .col-xs-4를 사용하여 그리드 레이아웃을 빠르게 만들 수 있습니다. 더 적은 믹스 인을 더 많은 의미 레이아웃에 사용할 수도 있습니다.
  • 열은 패딩을 통해 거터 (열 내용 사이의 간격)를 만듭니다. 해당 패딩은의 음수 여백을 통해 첫 번째 및 마지막 열의 행에서 오프셋됩니다 .rows.
  • 그리드 열은 확장하려는 사용 가능한 열 수를 12 개 지정하여 생성됩니다. 예를 들어 3 개의 동일한 열은 3 개를 사용 .col-xs-4합니다.
  • 한 행에 12 개 이상의 열이 배치 된 경우 추가 열의 각 그룹은 하나의 단위로 새 행으로 줄 바꿈됩니다.
  • 그리드 클래스는 화면 너비가 중단 점 크기보다 크거나 같은 장치에 적용되며 더 작은 장치를 대상으로하는 그리드 클래스를 재정의합니다. 따라서 예를 들어 .col-md-*요소에 클래스를 적용하면 중형 장치의 스타일뿐만 아니라 클래스가없는 경우 대형 장치에도 영향을줍니다.col-lg-* .

문제에 대한 가능한 해결책은 원하는 너비로 자신의 CSS 클래스를 정의하는 것입니다. .col-half{width:XXXem !important}이 클래스를 원래 부트 스트랩 CSS 클래스와 함께 원하는 요소에 추가 한다고 가정 해 보겠습니다 .

답변

Bootstrap 4는 flex-box를 사용하며 고유 한 열 정의를 만들 수 있습니다.

이것은 1.5에 가깝고 자신의 필요에 맞게 조정합니다.

.col-1-5 {
    flex: 0 0 12.3%;
    max-width: 12.3%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

답변

너비를 덮어 쓰려면 새 클래스를 만듭니다. 작업 코드는 jFiddle 을 참조하십시오 .

<div class="row">
  <div class="col-xs-1 col-xs-1-5">
    <div class="box">
      box 1
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 2
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 3
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 4
    </div>
  </div>
</div>

.col-xs-1-5 {
  width: 12.49995%;
}
.col-xs-3-5 {
  width: 29.16655%;
}
.box {
  border: 1px solid #000;
  text-align: center;
}

답변

부트 스트랩 3에서 언급 한 다른 사람들처럼 중첩 / 포함 기술을 사용할 수 있습니다.

그러나 이제 Bootstrap 4의 멋진 기능을 사용하는 것이 더 분명해졌습니다. 콘텐츠의 자연스러운 너비에 따라 열 크기를 자동으로 조정하기 위해 col-{breakpoint}-auto클래스 (예 🙂 를 사용하는 옵션이 있습니다 col-md-auto. 예를 들어 이것을 확인하십시오.

답변

Rex Bloom 응답에 따르면 부트 스트랩 도우미를 작성했습니다.

//8,33333333% col-1

.extra-col {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col-0-5 {
  @extend .extra-col;
  flex: 0 0 4.16666667%;
  max-width: 4.16666667%;
}

.col-1-5 {
  @extend .extra-col;
  flex: 0 0 12.5%;
  max-width: 12.5%;
}

.col-2-5 {
  @extend .extra-col;
  flex: 0 0 20.833333325%;
  max-width: 20.833333325%;
}

.col-3-5 {
  @extend .extra-col;
  flex: 0 0 29.166666655%;
  max-width: 29.166666655%;
}

.col-4-5 {
  @extend .extra-col;
  flex: 0 0 37.499999985%;
  max-width: 37.499999985%;
}

.col-5-5 {
  @extend .extra-col;
  flex: 0 0 45.833333315%;
  max-width: 45.833333315%;
}

.col-6-5 {
  @extend .extra-col;
  flex: 0 0 54.166666645%;
  max-width: 54.166666645%;
}

.col-7-5 {
  @extend .extra-col;
  flex: 0 0 62.499999975%;
  max-width: 62.499999975%;
}

.col-8-5 {
  @extend .extra-col;
  flex: 0 0 70.833333305%;
  max-width: 70.833333305%;
}

.col-9-5 {
  @extend .extra-col;
  flex: 0 0 79.166666635%;
  max-width: 79.166666635%;
}

.col-10-5 {
  @extend .extra-col;
  flex: 0 0 87.499999965%;
  max-width: 87.499999965%;
}

.col-11-5 {
  @extend .extra-col;
  flex: 0 0 95.8333333%;
  max-width: 95.8333333%;
}