我該如何將這個div放在Bootstrap中？

我正在使用Bootstrap來構建網站。我該如何將這個div放在Bootstrap中？

我不明白如何將<div>置於另一個<div>之內。我相信我應該能夠使用-offset來實現這個目標，但是當它不是偶數時，肯定不可能精確地居中，或者有其他方法嗎？

我需要到中心包含性別<div>在http://www.bootply.com/TdcsIiUhFe

來源

2015-06-13 Jack

我不認爲你可以居中，在與奇數列的網格申請。

選項1

放大容器4列，本場兩個，你可以與電網系統居中

選項2

只需使用CSS：

left: 50%; 
margin-left: -82px;

希望這會有所幫助

來源

2015-06-13 19:21:28 wezzy

您可以給它一個寬度並添加margin-left：auto和margin-right：auto。這本身不需要引導。

來源

2015-06-13 19:44:46

傑克，這是一個方法中心div在另一個div內。
即使您的父div在Bootstrap col-lg-X中使用奇數。

這是Fiddle。

odd col-xs-X width

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 
    <link rel="icon" href="../../favicon.ico"> 
 

 
    <title>Starter Template for Bootstrap</title> 
 

 
    <!-- Bootstrap core CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 

 
<style> 
 
body { 
 
    padding-top: 50px; 
 
} 
 
.block { 
 
    height: 200px; 
 
    background-color: darkorange; 
 
} 
 
.block2 { 
 
    height: 40px; 
 
    background-color: blueviolet; 
 
} 
 
.center { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
} 
 
</style> 
 

 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-inverse navbar-fixed-top "> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand " href="#">Project name</a> 
 
     </div> 
 
     <div id="navbar" class="collapse navbar-collapse"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#about">About</a></li> 
 
      <li><a href="#contact">Contact</a></li> 
 
      </ul> 
 
     </div><!--/.nav-collapse --> 
 
     </div> 
 
    </nav> 
 

 
    <div class="container col-lg-12"><br><br></div> 
 
    
 
    <div class="container col-lg-12"> 
 

 
      <div class="col-xs-9 col-sm-3 col-md-7 col-lg-5 block"> 
 
       
 
       <div class="col-xs-3 col-sm-6 col-md-5 col-lg-3 block2 center"> 
 
       </div> 
 
       
 
      </div> 
 
      
 
    </div><!-- /.container --> 
 

 

 
    <!-- Bootstrap core JavaScript 
 
    ================================================== --> 
 
    <!-- Placed at the end of the document so the pages load faster --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
    
 
</body> 
 
</html>

來源

2015-06-13 22:37:46 AngularJR

使用您的容器div的， '文本中心' 的輔助類。
如果內部容器是一個塊的容器中，將其設置爲：
display: inline-block;

http://getbootstrap.com/css/#type-alignment

來源

2015-06-13 22:47:21