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：如何在网格设计中的任何位置水平放置元素？

回答

相关问题