부 트랩에서 열을 더 크게 또는 작게 만드는 방법은 무엇입니까?

Question

내 웹 페이지에이 코드가 있고 부트 스트랩으로 만들었습니다.

<div class="row"> 
    <div class="col-md-11"> 
    Here I have content 
    </div> 
    <div class="col-md-1"> 
    Here I have content 
    </div> 
</div> 

과 내가 첫 번째 열은 작게 것으로,이 칼럼에 필요한, 10.5 크기와 두 번째 열은 더 큰 1.5 크기입니다. CSS에서 너비로 할 수 있습니까? 이걸로 나를 도울 수 있니?

감사합니다.

Answer 1

부트 스트랩에는 부분 열에 대한 직접적인 규정이 없습니다.

다른 수의 열 (예 : 24)에서 작동하도록 스타일 시트를 다시 작성할 수 있습니다.

customize 페이지에서 다른 수의 열을 지정하고 스타일 시트를 생성 할 수 있습니다.

또는 Git의 Bootstrap을 확인하고 the variables file을 수정하여 동일한 효과를 얻을 수 있습니다.

Answer 2

그냥 자신의 브레이크 포인트를 만듭니다

@media (min-width: 992px) { 
    col-md-10-5 { 
     width: 9.523809523809524%; // 100/10.5 
    } 

    col-md-1-5 { 
     width: 66.666666666%; // 100/1.5 
    } 
} 

---

대체 당신은 Bootstrap generator를 사용하여 24 개 컬럼 대신 12 그리드 크기를 늘릴 수 있습니다.

Answer 3

부트 스트랩은 범용 구성 요소를 제공합니다. 부트 스트랩 행과 열은 일반적으로 서로 다른 웹 사이트 파트 또는 다른 기능을 포함하도록 설계되었습니다 (예 : 가장 최근의 뉴스 피드가있는 본문과 현재 본문이있는 본문)

고유 한 구성 요소/마크 업을 작성하려고합니다. 부트 스트랩 행과 열에 의해 분할되어서는 안됩니다. 나는 그것을 위해 자신의 CSS를 작성하는 것이 좋습니다.

<div> <!--some container (e.g. bootstrap container or column)--> 
    <div class="my-component"> 
    <div class="main-part"></div> 
    <div class="additional-part"></div> 
    </div> 
</div> 

.my-component { 
    /*something*/ 
} 
.my-component > .main-part { 
    width: 600px; 
    /*some margin or padding*/ 
} 
.my-component > .additional-part { 
    width: 200px; 
    /*some margin or padding*/ 
} 

그리고 필요한 경우 미디어 쿼리가 포함됩니다. 프레임 워크 그리드 시스템을 재정의하지 않는 것이 좋습니다.