다른 화면에 대한 유체 컨테이너 박스 부트 스트랩

Question

내가하려고 내가 어떻게 다양한 화면에서 테스트 할 때 상자의 위치가 다릅니다 상관없이

부트 스트랩 3에 유체 컨테이너와 디자인을 구현하지하려고 크기. http://riyalinew.jeddahloyalty.com/html/

• 것은 내가 사용해야 IMG :

  디자인이

  HomePage

  그리고 내가 구현 한 모습을 생각한다

  <div class="container-fluid"> 
  
      <!-- Marketing Icons Section --> 
      <div class="row"> 
       <div class="col-lg-8 c1"> 
        <img src="images/slider.png"> 
       </div> 
       <div class="col-lg-4 c2"> 
        <div class="row"> 
         <div class="col-lg-12 c3"> 
          <img src="images/user.png" class="img-responsive"> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-lg-6 c4"> 
         <h1>BOX1</h1> 
  
         </div> 
         <div class="col-lg-6 c5"> 
  
         <h1>BOX2</h1> 
         </div> 
        </div> 
  
        <div class="row"> 
         <div class="col-lg-6 c6"> 
         <h1>BOX3</h1> 
         </div> 
         <div class="col-lg-6 c7"> 
         <h1>BOX4</h1> 
         </div> 
        </div> 
       </div> 
  
      </div> 
  
      <div class="row bottom_bg"> 
      <div class="col-lg-3"> 
      4+ XXXXXXX 
      </div> 
      <div class="col-lg-3"> 
      444+ XXXXXXX 
      </div> 
      <div class="col-lg-3"> 
      6664+ XXXXXXX 
      </div> 
      <div class="col-lg-3"> 
      89894+ XXXXXXX 
      </div> 
      </div> 
  

  샘플 여기 슬라이더 보 - 응답 클래스 x?

• 왼쪽 4 개 상자에 최소 높이를 추가해야합니까?
• 브라우저 창의 크기가 조정되면 왼쪽 상자가 오른쪽 슬라이더 상자 위에옵니다.
  • 큰 화면에서 오른쪽 상자와 왼쪽 상자는 중간에 넓은 흰색 영역을 표시합니다.

은 유체 컨테이너에이 디자인을 구현 할 수 있습니까?

Answer 1

div.col-lg-x 클래스 이름에 col-md-x를 추가하십시오. col-lg-x는 대형 스크린을 위해 설계되었으며 레이아웃에 다른 스케일 값을 설정합니다. 크롬 도구

Answer 2

좋아 편집, 최대 나는이 작업을 수행 할 수 있습니다. 고정 높이를 사용하지 않았습니다. 이것은 flexbox를 사용하여 해결할 수 있습니다. 상자에 내용이있는 경우. 나는 같은 결과를 낼 수있다. 나는 상자 높이를 유지하면서 상단 프로필 링크를 추가하는 방법을 알아 냈다.

<div class="container-fluid"> 

     <!-- Marketing Icons Section --> 
     <div class="row" style=" 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    overflow: hidden; 
"> 


     <div class="col-lg-8 c1" style="flex: 2;"> 
       <img src="images/slider.png" class="img-responsive"> 
      </div> 
      <div class="col-lg-4 c2" style=" 
    padding: 0px; 
    /* margin: 0px; */ 
    flex: 1; 
    background: rgba(0, 173, 166, 0.41);"> 
<div class="c1 row" style="height: 50vh;">//box 1,23,4 row here 

Answer 3

작은 화면에서도 같은 양식을 사용하려면 col-xs를 사용하십시오.