Div不使用類「Col-sm-7 col-sm-offset-2」的中心

-1

我在我的應用程序中使用引導程序。我想div中心我嘗試使用div col-sm-offset但不是div中心。Div不使用類「Col-sm-7 col-sm-offset-2」的中心

我使用類在格Col-sm-7 col-sm-offset-2

我的代碼這裏下面

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<style> 
 
.clsborder{ 
 
    border:1px solid black; 
 

 
} 
 

 
</style> 
 
<body> 
 

 

 
    
 
<div class="container"> 
 
    <div class="row"> 
 
<div class="col-sm-7 col-sm-offset-2 clsborder"> <h3>Column 1</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 
 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> 
 

 
    
 
    
 
</div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

注：我想股利中心自舉使用offset

Js小提琴演示here

來源

2016-09-07 Sumit patel

可能重複檢查此[中心引導柱，使用偏移（http://stackoverflow.com/questions/25480047/center-bootstrap-column-using-offset只爲小設備） –

我也試試這個..但我想col-sm-7然後不是中心div –

你不能在奇數列大小上使用偏移量對元素進行居中。檢查這個答案http://stackoverflow.com/questions/18153234/center-a-column-using-twitter-bootstrap-3。所以如果你不想編寫自定義的CSS，那麼使用'col-sm-8'或'col-sm-6'。 – jakob

我發現我的回答導遊中心......在@media查詢使用和建設custom Offset

@media (min-width: 768px) 
{ 
.custom-offset { 
    margin-left:21% !important; 
} 
}

更新的代碼如下

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<style> 
 
.clsborder{ 
 
    border:1px solid black; 
 

 
} 
 
@media (min-width: 768px) 
 
{ 
 
.custom-offset { 
 
    margin-left:21% !important; 
 
} 
 
} 
 

 

 
</style> 
 
<body> 
 

 

 
    
 
<div class="container"> 
 
    <div class="row"> 
 
<div class="col-sm-7 col-sm-offset-2 clsborder"> <h3>Column 1</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 
 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> 
 

 
    
 
    
 
</div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

的js小提琴演示Here

來源

2016-09-07 12:13:55

偏移量和列必須添加最多12列。

使用下式：

12 - COL-SM-＃/ 2

更換主題標記爲數字。

如果數字有小數，則不能抵消它。

8列是好的用的2

偏移如果它不工作，請嘗試使用css

來源

2016-09-07 11:08:49 Mechetle

謝謝你的回答..但你的答案沒有奏效..我桅杆可以使用col-sm-7，然後div中心使用偏移量 –

@Sumitpatel然後這只是簡單的bootstrap無法實現的。 bootstrap中沒有col-sm-offset-2.5。也許只是添加你自己的類與相應的利潤和/或填充？ –

Div不使用類「Col-sm-7 col-sm-offset-2」的中心

回答

相關問題