为什么Span会在Bootstrap中中断 [英] Why Span is breaking in Bootstrap

问题描述

我正在尝试使用引导程序创建一个网站.当我尝试在主要内容区域[Span5，Span5和Sidebar Span2]中添加一些跨度时，Sidebar断开并转到下一行 我将附加CSS和浏览器预览.

I was trying to make a website using bootstrap. When I tried to add some spans in the main content area [ Span5, Span5 and Sidebar Span2] Sidebar is breaking and comes to the next line I am attaching the CSS and browser preview.

如果有人在这方面需要帮助我，那就太好了

It would be nice if someone has to help me in this regard

CSS代码:

<div class="container">

  <div class="content-box">

  <div class="row">
    <div class="span12">
      <div class="span5">
        Column1
      </div>
      <div class="span5">
        Column2
      </div>
      <div class="span2">
        Sidebar
      </div>

    </div>
  </div><!-- End of "Row" -->

</div><!-- End of "Content Box" -->

</div><!-- End of "Container" -->

非常感谢

Teekeybee

Teekeybee

推荐答案

使用Bootstrap2，您需要使用row类包装嵌套的span:

With Bootstrap2, you need to wrap your nested spans with a row class:

<div class="container">
    <div class="content-box">
        <div class="row">
            <div class="span12">
                <div class="row"><!-- row for nested spans -->
                    <div class="span5">Column1</div>
                    <div class="span5">Column2</div>
                    <div class="span2">Sidebar</div>
                </div>
            </div>
        </div>
    </div>
</div>

对于您而言，我认为您的span12没有用，所以我建议:

In your case, I think your span12 is useless, so I suggest:

<div class="container">
    <div class="content-box">
        <div class="row">
            <div class="span5">Column1</div>
            <div class="span5">Column2</div>
            <div class="span2">Sidebar</div>
        </div>
    </div>
</div>

看看文档(嵌套列"部分): http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

Take a look to the doc ("Nested columns" part): http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

希望这会有所帮助！

这篇关于为什么Span会在Bootstrap中中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！