引導.row走出

我正在學習Bootstrap網格系統，所以我做了一些圖像的一排，但是當我降低了屏幕的分辨率時，我的圖像就在容器下面。引導.row走出

<div class="container main" id="second-box"> 

<h2 class="font-montserrat text-center"> Projects <i class="fa fa-file-code-o"></i> 
</h2> 
<div> 
    <div class="row"> 
     <img src= "http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg" class="projects-img img-responsive img-rounded col-md-4"> 
     <img src= "http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg" class="projects-img img-responsive img-rounded col-md-4"> 
     <img src= "http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg" class="projects-img img-responsive img-rounded col-md-4"> 
     <img src= "http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg" class="projects-img img-responsive img-rounded col-md-4"> 
    </div> 
</div> </div>

這裏是CSS：

#second-box{ 
    margin: 1px auto; 
    height: 700px; 
} 
.main { 
    background-color: #e0f0e2; 
    width: 70%; 
    box-shadow: 0px 0px 5px 0px; 
} 
.projects-img{ 
    width: 360px; 
    margin-left: 20px; 
    margin-bottom: 20px;}

圖片：

Normal

Getting out

來源

2016-05-29 Mateus Luiz

你能後所發生的事情的截圖，也許你期待發生什麼？ – theatlasroom

是的，等一下 –

UPD。我提出以下解決方案：

#second-box { 
 
    margin: 1px auto; 
 
} 
 
.main { 
 
    background-color: #e0f0e2; 
 
    width: 70%; 
 
    box-shadow: 0px 0px 5px 0px; 
 
} 
 
.projects-img { 
 
    width: 360px; 
 
    margin: 0 auto 20px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div class="container main" id="second-box"> 
 

 
    <h2 class="font-montserrat text-center"> Projects <i class="fa fa-file-code-o"></i></h2> 
 

 
    <div class="row"> 
 
    <div class="col-xs-6"><img src="http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg" class="projects-img img-responsive img-rounded"></div> 
 
    <div class="col-xs-6"><img src="http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg" class="projects-img img-responsive img-rounded"></div> 
 
    <div class="col-xs-6"><img src="http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg" class="projects-img img-responsive img-rounded"></div> 
 
    <div class="col-xs-6"><img src="http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg" class="projects-img img-responsive img-rounded"></div> 
 
    </div> 
 
</div>

我可以刪除height: 700px;？ `試試這個：

#second-box { 
 
    margin: 1px auto; 
 
} 
 
.main { 
 
    background-color: #e0f0e2; 
 
    width: 70%; 
 
    box-shadow: 0px 0px 5px 0px; 
 
} 
 
.projects-img { 
 
    width: 360px; 
 
    margin: 0 auto 20px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div class="container main" id="second-box"> 
 

 
    <h2 class="font-montserrat text-center"> Projects <i class="fa fa-file-code-o"></i></h2> 
 

 
    <div class="row"> 
 
    <div class="col-md-6"><img src="http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg " class="projects-img img-responsive img-rounded"></div> 
 
    <div class="col-md-6"><img src="http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg" class="projects-img img-responsive img-rounded"></div> 
 
    <div class="col-md-6"><img src="http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg " class="projects-img img-responsive img-rounded"></div> 
 
    <div class="col-md-6"><img src="http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg" class="projects-img img-responsive img-rounded"></div> 
 
    </div> 
 
</div>

來源

2016-05-29 23:21:03

工作原理：D，如果我將高度改爲100％ –

但是爲什麼你的方法奏效？ –

@MateusLuiz爲什麼添加'height：700px'？ –

你缺少的行類中col類。試試這個：

<div class="row"> 
    <div class="col-md-6"> 
     <img src= "http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg" class="projects-img img-responsive img-rounded"> 
    </div> 
    <div class="col-md-6"> 
     <img src= "http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg" class="projects-img img-responsive img-rounded"> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-6"> 
     <img src= "http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg" class="projects-img img-responsive img-rounded"> 
    </div> 
    <div class="col-md-6"> 
     <img src= "http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg" class="projects-img img-responsive img-rounded"> 
    </div> 
</div> 

.projects-img { 
    width: 100%; //try this to make it responsive 
    margin-left: 20px; 
    margin-bottom: 20px; 
}

看看以瞭解更多信息的文檔：http://v4-alpha.getbootstrap.com/layout/grid/

來源

2016-05-29 23:03:37

沒有解決：/ –

現在呢？ –

圖像已經有一個col-class ...不需要額外的col-can-12。 – JasperZelf

你給你的圖片在CSS的360像素，一組寬度......這樣，他們就不能成爲響應和意志從他們的容器中衝出...

來源

2016-05-29 23:12:05 JasperZelf

回答

相關問題