中心引导行和跨度

Posted 2023-03-29

【中文标题】中心引导行和跨度

【英文标题】：Center Bootstrap Row and Spans

【发布时间】：2013-10-03 03:12:23

【问题描述】：

我正在尝试使用 bootsrap 将 Row 和其中的跨度居中。

您可以在此处的页脚中看到它： http://www.divisionforty.com/wall/

我希望社交网络图标位于左侧，版权位于中间，power by 位于右侧，一切都是如此。

页脚代码：

<div id="footer">

        <div id="footer-content">


                <div id="footer-bottom" class="clear">



                      <div class="row" style="margin: 0 auto;">
<div class="span12" style="width:100%;">
<div class="span2" style="text-align:left;">
<a href="https://twitter.com/WallSpaceOttawa"><img  class="social" src="<?php bloginfo('stylesheet_directory'); ?>/img/twitter.png"></a>
<a href="https://www.facebook.com/pages/Wall-Space-Gallery-and-Framing/195974620432391"> 
<img  class="social" src="<?php bloginfo('stylesheet_directory'); ?>/img/facebook.png"></a>
</div>

<div class="span6" style="text-align:center;">

<h5>
  Copyright &#169; <script type="text/javascript">
//<![CDATA[
                                    var dteNow = new Date();
                                    var intYear = dteNow.getFullYear();
                                    document.write(intYear);
          //]]>
          </script>
          Wall Space Gallery And Framing - All Rights Reserved.

</h5>
</div>

<div class="span4" style="text-align:right;">
<h5>Powered by <a href="http://divisionforty.com">Division Forty</a></h5>
</div>
</div>

</div>


                </div><!--END FOOTER-BOTTOM-->    

        </div><!--END FOOTER-CONTENT-->        

    </div><!--END FOOTER-->

希望有人能提供帮助。

谢谢

丹佛

【参考方案1】：

<div id="footer">

        <div id="footer-content">


                <div id="footer-bottom" class="clear">



                      <div class="row" style="margin: 0 auto;">
<div class="span12" style="width:100%;">
<div class="span2 text-left">
<a href="https://twitter.com/WallSpaceOttawa"><img  class="social" src="<?php bloginfo('stylesheet_directory'); ?>/img/twitter.png"></a>
<a href="https://www.facebook.com/pages/Wall-Space-Gallery-and-Framing/195974620432391"> 
<img  class="social" src="<?php bloginfo('stylesheet_directory'); ?>/img/facebook.png"></a>
</div>

<div class="span6 text-center">

<h5>
  Copyright &#169; <script type="text/javascript">
//<![CDATA[
                                    var dteNow = new Date();
                                    var intYear = dteNow.getFullYear();
                                    document.write(intYear);
          //]]>
          </script>
          Wall Space Gallery And Framing - All Rights Reserved.

</h5>
</div>

<div class="span4 text-right">
<h5>Powered by <a href="http://divisionforty.com">Division Forty</a></h5>
</div>
</div>

</div>


                </div><!--END FOOTER-BOTTOM-->    

        </div><!--END FOOTER-CONTENT-->        

    </div><!--END FOOTER-->

您可以使用内置的对齐类 text-left、text-right 和 text-center

【讨论】：

由于某种原因，当我添加 span12 超出页面时，由于宽度：100%，但是当我删除该宽度：100% 时，power by 会被删除

尝试移除元素周围的 span12 包装器

是否有替代 spans 的方法，因为它似乎效果不佳

对 bootstrap 2 不太熟悉，所以我不确定。

一般情况下不一定要使用引导程序

【参考方案2】：

你的设计是让页脚全宽作为屏幕宽度吗？

如果是，您只需将行类更改为行流体类。 Bootstrap 2.3.2 使用的是 row-fluid，而不是 row。

<div id="footer">
     <div id="footer-content">
          <div id="footer-bottom" class="clear">
                  <div class="row-fluid" style="margin: 0 auto;">
    <div class="span12" style="width:100%;">

        <div class="span2 text-left">
        </div>

        <div class="span6 text-center">
        </div>

        <div class="span4 text-right">
        </div>
    </div>
</div>
            </div><!--END FOOTER-BOTTOM-->    
    </div><!--END FOOTER-CONTENT-->        
</div><!--END FOOTER-->

如果没有，请为宽度放置一个容器。

【讨论】：

是否有替代跨度的方法，因为它似乎效果不佳，目的是让它成为全宽