Question

我尝试使用bootstrap twitter来格式化我的网站。当我将几个div添加到行列格式时。我有一个带有div的9x9网格。我想在网格外放一个元素到一个固定的位置。我为我的元素使用了row-fluid和span类。如何将我的最后一个元素完全放在我的页面上？

我的代码：

 <body onload='drawAll();'>
 <section>

    <div class="container-fluid">   
        <div class="row-fluid">
            <div id="mapWidget" class="debug span8">
                <canvas id="map"  
                width="500" 
                height="280" 
                ></canvas>

                <canvas id="layer" 
                width="500" 
                height="280"
                style= "position:absolute;
                left:0px;
                top:0px;"></canvas>     
            </div>
        </div>  

        <div class="row-fluid">
            <div id="profiles" class = "span4">
                <script id="profileTemplate" type="text/template">
                    <div  class= "hashTags" id = 'redLine'>                 
                        <h1> <img src="images/tagIcon.png"/> HASHTAGS</h1>  
                        <br><font size = "6"><%= tagsCloud.tags[0] %> </font> 
                        <%= tagsCloud.tags[1] %> 
                        <%= tagsCloud.tags[2] %> 
                        <%= tagsCloud.tags[3] %>  
                        <font size = "5"><%=tagsCloud.tags[4] %>  </font>
                        <%= tagsCloud.tags[5] %> 
                        <%= tagsCloud.tags[6] %> 
                        <%= tagsCloud.tags[7] %></br> 
                        <br> <%= tagsCloud.tags[8] %> 
                        <%= tagsCloud.tags[9] %> 
                        <%= tagsCloud.tags[10] %> 
                        <font size = "6"><%= tagsCloud.tags[11] %> </font>
                        <%= tagsCloud.tags[12] %> 
                        <%= tagsCloud.tags[13] %> 
                        <%= tagsCloud.tags[14] %> 
                        <%= tagsCloud.tags[15] %></br>
                        <br><font size = "6"><%= tagsCloud.tags[0] %> </font> 
                        <%= tagsCloud.tags[1] %> 
                        <%= tagsCloud.tags[2] %> 
                        <%= tagsCloud.tags[3] %>  
                        <font size = "5"><%=     tagsCloud.tags[4] %>  </font>
                        <%= tagsCloud.tags[5] %> 
                        <%= tagsCloud.tags[6] %> 
                        <%= tagsCloud.tags[7] %></br>   
                    </div>
                </script>
            </div>
            <div class = 'usersCloud debug span2'> 
                <h2 ><img src="images/chat.png"/>TOP COMMENTERS</h2>
                    <img src="images/userCloud.png" />
            </div>

            <div class = ' button span2'>
                <img src="images/menu.png"/>
            </div>


        </div>  

        <div class="row-fluid"> 
        </div>
        <div class="row-fluid">     
            <div id="footer" class="debug span4"><img       src="images/logo.png"/></div>   
        </div>

我非常特别的元素是带有菜单png图像的元素，当我把它放在网格之外时，它有意想不到的行为！ Css代码：

.button{
 padding: 10px 10px 10px 10px; 
 display:inline-block;
 width: 24px;
 right:-80px;top:0px;
 position:fixed;
 }

Answer 1

我认为你的答案在你的问题中......

只需在引导框架之外添加div （因此，不要在行或列中），然后设置样式。

它不会参与bootstrap应用的响应式内容，但您可以通过使用自己的代码扩展引导媒体查询来处理...

在bootstrap网格外添加div

1 个答案: