引導3列天溝

Question

我試圖解決這個問題多次，但它仍然發生，我只是找不到正確的修復。 我不能創建圍繞引導3列排水溝這裏是我的小提琴：jsfiddle.net/creuxttL

我確切的問題：當我創建這三根柱子，我期待一些陰溝裏他們之間，所以他們不看像一塊大磚頭。默認情況下，我沒有任何裝訂線，所以我嘗試手動完成 - 使用css類.col。我仍然沒有得到任何保證金/填充周圍的框。我該怎麼辦？

Answer 1

你撥弄沒有引導3包括在內。 http://jsfiddle.net/va94exo2/是一個小小的修改。

已經將所有col-md-4內容都包含在內部div中，並將ID =「row」更改爲class並刪除了額外的.col類，並且還設計了內部div。

.inner-content{ 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 100; 
 
    color: white; 
 
    text-align: center; 
 
    background-color: #00b9ff; 
 
    border: 1px solid black; 
 
} 
 
.overlay-pic { 
 
    max-height: 200px; 
 
    display: block; 
 
    margin: auto; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: #44cbff; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 0; 
 
    transition: .5s ease; 
 
} 
 

 
.overlay p { 
 
    font-family: 'Raleway'; 
 
    font-style: italic; 
 
    white-space: nowrap; 
 
    color: white; 
 
    font-size: 20px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
} 
 

 
.col { 
 
    /*gutter*/ 
 
    padding-right: 7px; 
 
    padding-left: 7px; 
 
} 
 

 
.col:not(:first-child, :last-child) { 
 
    padding-right: 7px; 
 
    padding-left: 7px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row" style="margin-top: 10px;"> 
 
    
 
    <div class="col-md-4"> 
 
     <div class="inner-content">  
 
     
 
     <h1>Festival 2001</h1> 
 
     <img src="event.jpg" class="overlay-pic hidden-tablet img-responsive"> 
 
     <div class="overlay"> 
 
     <p>Our event.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-4"> 
 
    <div class="inner-content"> 
 
     <h1>Who are we?</h1> 
 
     <img src="question.jpg" class="overlay-pic hidden-tablet img-responsive"> 
 
     <div class="overlay"> 
 
     <p>Read more about us</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-4"> 
 
    <div class="inner-content"> 
 
     <h1>where, when?</h1> 
 
     <img src="calendar.jpg" class="overlay-pic hidden-tablet img-responsive"> 
 
     <div class="overlay"> 
 
     <p>Look at our calendar.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    
 
</div>

Answer 2

不正確這是正好你在找什麼，但是如果你只是想在行之間有空格，你可以在「.col-md-4」類中爲你的css添加一個「margin-top」屬性。

希望這會有所幫助。

.col-md-4 { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 100; 
 
    color: white; 
 
    text-align: center; 
 
    background-color: #00b9ff; 
 
    border: 1px solid black; 
 
    margin-top:10px; 
 
} 
 

 
.overlay-pic { 
 
    max-height: 200px; 
 
    display: block; 
 
    margin: auto; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: #44cbff; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 0; 
 
    transition: .5s ease; 
 
} 
 

 
.overlay p { 
 
    font-family: 'Raleway'; 
 
    font-style: italic; 
 
    white-space: nowrap; 
 
    color: white; 
 
    font-size: 20px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
} 
 

 
.col { 
 
    /*gutter*/ 
 
    padding-right: 7px; 
 
    padding-left: 7px; 
 
} 
 

 
.col:not(:first-child, :last-child) { 
 
    padding-right: 7px; 
 
    padding-left: 7px; 
 
}

<div class="container"> 
 
    <div id="row" style="margin-top: 10px;"> 
 
    <div class="col-md-4 col"> 
 
     <h1>Festival 2001</h1> 
 
     <img src="event.jpg" class="overlay-pic hidden-tablet img-responsive"> 
 
     <div class="overlay"> 
 
     <p>Our event.</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-4 col"> 
 
     <h1>Who are we?</h1> 
 
     <img src="question.jpg" class="overlay-pic hidden-tablet img-responsive"> 
 
     <div class="overlay"> 
 
     <p>Read more about us</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-4 col"> 
 
     <h1>where, when?</h1> 
 
     <img src="calendar.jpg" class="overlay-pic hidden-tablet img-responsive"> 
 
     <div class="overlay"> 
 
     <p>Look at our calendar.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

引導沒有添加。我修改了你的代碼。我希望你期待這一點。

.col { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 100; 
 
    color: white; 
 
    text-align: center; 
 
    background-color: white; 
 
} 
 

 
.overlay-pic { 
 
    max-height: 200px; 
 
    display: block; 
 
    margin: auto; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: #44cbff; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 0; 
 
    transition: .5s ease; 
 
} 
 

 
.overlay p { 
 
    font-family: 'Raleway'; 
 
    font-style: italic; 
 
    white-space: nowrap; 
 
    color: white; 
 
    font-size: 20px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
} 
 

 
.col h1{ 
 
    margin-top:0px; 
 
}

<div class="container"> 
 
    <div id="row"> 
 
    <div class="col-md-4 col"> 
 
    <div style="margin:5px; background:#00b9ff;border: 1px solid black;"> 
 
     <h1>Festival 2001</h1> 
 
     <img src="event.jpg" class="overlay-pic hidden-tablet img-responsive"> 
 
     <div class="overlay"> 
 
     <p>Our event.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-4 col"> 
 
    <div style="margin:5px; background:#00b9ff;border: 1px solid black;"> 
 
     <h1>Who are we?</h1> 
 
     <img src="question.jpg" class="overlay-pic hidden-tablet img-responsive"> 
 
     <div class="overlay"> 
 
     <p>Read more about us</p> 
 
     </div></div> 
 
    </div> 
 

 
    <div class="col-md-4 col"> 
 
    <div style="margin:5px; background:#00b9ff;border: 1px solid black;"> 
 
     <h1>where, when?</h1> 
 
     <img src="calendar.jpg" class="overlay-pic hidden-tablet img-responsive"> 
 
     <div class="overlay"> 
 
     <p>Look at our calendar.</p> 
 
     </div> 
 
     </div></div> 
 
    </div> 
 
</div>