문제

Bootstrap에서 다음과 같은 2열 레이아웃을 어떻게 얻을 수 있습니까?

  • 열 1:너비는 최소 및 최대 너비 사이에서 사용 가능한 크기로 조정됩니다.
  • 열 2:고정 크기 너비

예를 들어 다음과 같은 경우가 있습니다.

  • 열 1분 너비:300px
  • 열 1의 최대 너비:800px
  • 열 2 너비:400px

사용 가능한 너비가 800px인 해상도에서는 두 열 모두 너비가 400px일 것으로 예상됩니다.2000px를 사용할 수 있는 해상도에서는 첫 번째 열이 800px이고 두 번째 열이 400px이고 화면 오른쪽에 800px의 공백이 있을 것으로 예상합니다.

도움이 되었습니까?

해결책

부트스트랩은 반응형, 비정적 환경에 유용하기 때문에 어렵습니다.

이 방법으로 맞을 수 있습니까? http://bootply.com/98214

HTML

<div class="row">
  <div id="col1" class="col-xs-6 col-md-5">coco 1</div>
  <div id="col2" class="col-xs-6 col-md-2">coco 2</div>
</div>

CSS

#col1{
  background:green;
  max-width:800px !important;
}

#col2{
  background:yellow;
  max-width:400px !important;
}

매우 작은 장치의 경우 렌더링이 좋지 않으므로 min-width를 사용하면 안 됩니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top