【问题标题】:twitter bootstrap 2 column fixed layout brokentwitter bootstrap 2列固定布局损坏
【发布时间】:2013-01-20 03:22:02
【问题描述】:

我的网站 http://whoisdomains.co.uk/

正在使用 twitter 引导程序 http://twitter.github.com/bootstrap/index.html

我正在尝试使用两列布局 http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

他们给出的代码是

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

然而,我换了 8 和 4,但不明白为什么这会有所作为。正如您从我的网站上看到的,我在其中放入了一些虚拟文本,但其损坏且重叠

【问题讨论】:

    标签: html css layout twitter-bootstrap


    【解决方案1】:

    跨度中有 2 个非常长的单词,因此它们不能被包装。将一些空格字符放入单词中,它将对齐,如下所示:

    <div class="span8">dskjdskjdskjlsdjlsdj ldjslkd sjkldsjklsdjlsdkjskldj ldksjldskjklsdjl dkjdlsjsdkjkladmdklmc kldmslkcmdlasmkmlkdjslkaj dlkjdsakjsdljlk sjljds</div>
    <div class="span4">dkjsasdjsdhakhfl kjhdlkah fklhskldfha skjdhfk hsdklhfkjsdh ajklhfjklshadl kfhsjkadhfkjlh dsfjlhjaksdhfjk hjhdsajlkhdfljhasd ljhflkdhlkfhlkhdskfd</div>
    

    如果您使用诸如 firebug 之类的控制台检查页面,您会发现 span div 的宽度是正确的。

    【讨论】:

    • 如果问题是你不能有这种行为,你实际上可以用word-wrap: break-word 纠正这个问题
    • 这里的教训:使用一些真实世界的占位符文本(Lorem Ipsum 就可以了)。
    猜你喜欢
    • 1970-01-01
    • 2012-02-03
    • 1970-01-01
    • 1970-01-01
    • 2012-08-15
    • 1970-01-01
    • 2015-10-16
    • 2012-04-17
    • 2012-10-23
    相关资源
    最近更新 更多