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

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

---

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를 곱하고 너비로 설정하십시오.

---

짧은 대답은 ' 아니요'입니다 (기술적으로 원하는 클래스의 이름을 지정할 수 있지만 자체 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 클래스와 함께 원하는 요소에 추가 한다고 가정 해 보겠습니다 .

---

너비를 덮어 쓰려면 새 클래스를 만듭니다. 작업 코드는 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에서 언급 한 다른 사람들처럼 중첩 / 포함 기술을 사용할 수 있습니다.

However it is becoming more obvious to use pretty awesome feature from Bootstrap 4 now. you simple have the option to use the col-{breakpoint}-auto classes (e.g. col-md-auto) to make columns size itself automatically based on the natural width of its content. check this for example

---

This is not Bootstrap Standard to give col-md-1.5 and you can not edit bootstrap.min.css because is not right way. you can create like this http://www.bootply.com/125259

---

Bootstrap 4 uses flex-box and you can create your own column definitions

This is close to a 1.5, tweak to your own needs.

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

---

This question is quite old, but I have made it that way (in TYPO3).

Firstly, I have made a own accessible css-class which I can choose on every content element manually.

Then, I have made a outer three column element with 11 columns (1 - 9 - 1), finally, I have modified the column width of the first and third column with CSS to 12.499999995%.

참고URL : https://stackoverflow.com/questions/30026855/can-i-give-the-col-md-1-5-in-bootstrap