ブートストラップカラムサイドバーの高さ

私は混乱するブートストラップグリッドシステムに問題があります。私は2列レイアウトを持ち、モバイルデバイス上で1列（col-xs-12）のレイアウトになります。ブートストラップカラムサイドバーの高さ

大きな問題では、サイドバーが「ヘッダーdiv」よりも高く、空白を占めるという問題があります。

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 header">header</div> 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 sidebar">sidebar</div> 
     <div class="col-lg-8 col-sm-8 col-xs-12 main_content">main_content</div> 
    </div> 
</div>

相続人jsbin： https://jsbin.com/helizemefa/edit?html,css,output

多分ちょうど今ラインに立っイム..あなたの助けを

ありがとう！

出典

2017-06-08 Martin

.header{ 
 
    background-color:red; 
 
} 
 

 
.sidebar { 
 
    background-color:yellow; 
 
    
 
} 
 

 
.main_content { 
 
    background-color:green; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
    
 
    
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 header">header</div> 
 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 pull-right sidebar">sidebar</div> 
 
     <div class="col-lg-8 col-lg-8 col-sm-8 col-xs-12 main_content">main_content</div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

あなたはそれを解決し、この

 <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 sidebar pull-right">sidebar</div>

出典

2017-06-09 00:37:48

おかげのように、あなたのサイドバーにpull-rightを追加することができます！ – Martin

偉大な、マーク正しい質問として。 –

ブートストラップカラムサイドバーの高さ

答えて

関連する問題