0

我尝试使用 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;
 }
4

1 回答 1

0

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

只需将您的 div 添加到引导框架之外（因此，不要在一行或一列中），然后对其进行样式设置。

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

于 2013-10-15T09:24:45.993 回答