Bootstrap：如何在網格設計中的任何位置水平放置元素？

我正在學習Bootstrap。我使用Bootstrap進行固定寬度的設計。從在線文檔中，我知道從列開始定位元素很容易。例如：Bootstrap：如何在網格設計中的任何位置水平放置元素？

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Bootstrap version</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <!-- Le styles --> 
    <link href="css/bootstrap.css" rel="stylesheet"> 
    <style type="text/css"> 
     body { 
      padding-top: 60px; 
      padding-bottom: 40px; 
     } 
    </style> 
    <link href="css/bootstrap-responsive.css" rel="stylesheet"> 

    <link href="learn.css" rel="stylesheet"> 

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> 
    <!--[if lt IE 9]> 
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 

</head> 

<body> 


<div class="container"> 
    <div class="row"> 
    <div class="span3" style="background-color:grey">span3</div> 
    <div class="span5" style="background-color:pink"><div id="text">span5 text</div></div> 
    <div class="span4" style="background-color:navy">span4</div> 
    </div> 
</div> 


    <!-- Le javascript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>  
    <script src="js/bootstrap.min.js"></script> 
</body> 
</html>

在上文中，

<div id="text">span5 text</div>

水平開始恰好第四列的開始。我想知道引導專家用戶如何使用CSS來定位

<div id="text">span5 text</div>

，使之成爲第三和第四列之間開始或者第八和第九列之間結束。

我正在考慮使用兩種：

<style> 
#text { 
margin-left:-10px; 
} 
</style>

或

<style> 
#text { 
    position:relative; 
    left:-10px; 
} 
</style>

來定位DIV，但不知道是否這是首選，想知道專家做什麼，一些其他的方法。

謝謝！

來源

2013-06-13 curious1

你我一個從列之間的「邊緣」的中間？ – albertedevigo

是的。我想將該div定位到任何位置。 – curious1

默認情況下，引導程序跨度之間總是有一個空白邊（或間隙）（請參閱：http://bootply.com/64463）。如果你想重寫這個，可以使用CSS，但是你將失去Bootstrap的響應優勢，因爲該元素將從正常的頁面流中移除。

一個更好的選擇可能是一個自定義啓動建設有沒有排水溝：http://twitter.github.io/bootstrap/customize.html#variables

或者，你可以創建你適用於需要這樣的天溝少例如行的自定義CSS類：http://bootply.com/61712

來源

2013-06-16 20:46:17 ZimSystem

非常感謝您的輸入！ – curious1

Skelly，我是否應該在帖子中使用css來處理一兩個案例（而不是整個網站的需求）？謝謝！ – curious1

我用這個解決方案，它爲我工作：

<div class="jumbotron" style="height:100%;"> 
    <div> 
    <table style="height:100%;width:100%"> 
     <thead> 
      <tr> 
       <td> 
        <div class="row"> 
         <div class="col-md-6"> 
          head 1 
         </div> 
         <div class="col-md-6"> 
          head 2 
         </div> 
        </div> 
       </td> 
      </tr> 
     </thead> 

     <tbody> 
      <tr> 
       <td> 
        <div class="row"> 
         <div class="col-md-6"> 
          body 1 
         </div> 
         <div class="col-md-6"> 
          body 2 
         </div> 
        </div> 
       </td> 
      </tr> 
     </tbody> 

     <tfoot> 
      <tr> 
       <td> 
        <div class="row"> 
         <div class="col-md-6"> 
          foot 1 
         </div> 
         <div class="col-md-6"> 
          foot 2 
         </div> 
        </div> 
       </td> 
      </tr> 
     </tfoot> 
    </table> 
</div>

來源

2015-09-23 09:24:21

Bootstrap：如何在網格設計中的任何位置水平放置元素？

回答

相關問題