Модификация кода исходного кода

Question

Im using Bootstrap в моем приложении. Я пытаюсь сделать так, чтобы вся моя левая сторона была #fff, а остальное - #f9f9f9.

Это то, что у меня есть до сих пор.

HTML:

<div class="container"> 
    <section class="content"> 
    <div class="col-xs-8"> 
     // Left side 
    </div> 

    <div class="col-xs-4"> 
    // Right side side-bar 
    </div> 

    </section> 
</div> 

CSS:

. container { 
    width: 1200px !important; 
} 

PS: Я не хочу/нужно адаптивный дизайн.

Приведенный ниже пример является примером того, чего я хочу достичь.

Адрес link that hast the same design.

Answer 1

Пожалуйста, попробуйте следующий код:

HTML

<div class="container"> 
    <section class="content"> 
     <div class="col-xs-8 left-side"> 
     // Left side 
    </div> 
    <div class="col-xs-4 side-bar"> 
     // Right side side-bar 
    </div> 
    </section> 
</div> 

CSS

.container{ 
    margin: 0; 
    padding: 0; 
    width: 100% 
} 
.content{ 
    height: 100%; 
    width: 100%; 
} 
.left-side{ 
    background-color: #fff; 
    min-height: 100%; 
} 
.side-bar{ 
    background-color: #f9f9f9; 
    min-height: 100%; 
} 
.no-margin{ 
    margin: 0; 
    padding: 0 
} 

Answer 2

Это был бы способ достичь того, что вы хотите сделать.

.leftside { 
 
    background: #fff; 
 
} 
 

 
.rightside { 
 
    background: #f9f9f9; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-8 leftside"> 
 
     // Left side 
 
    </div> 
 
    <div class="col-xs-4 rightside"> 
 
     // Right side side-bar 
 
    </div> 
 
    </div> 
 
</div>