Twitter引导固定布局问题

我使用Twitter引导得到了一个奇怪的问题。设置一个测试页面，其行为应与此处的示例类似：http://twitter.github.io/bootstrap/examples/hero.html。这里的HTML：Twitter引导固定布局问题

<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap.css" /> 
    <link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap-yii.css" /> 
    <link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap-responsive.min.css" /> 
    <script type="text/javascript" src="/assets/8b15478e/jquery.js"></script> 
    <script type="text/javascript" src="/assets/24d7eb4f/js/bootstrap.js"></script> 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="span4" style="border: 1px solid red;"></div> 
      <div class="span4" style="border: 1px solid red;"></div> 
      <div class="span4" style="border: 1px solid red;"></div> 
     </div>    
    </div> 
</body>

应该产生上面的链接显示的结果，但我得到的下一行第三span4，它就会在这两个先推了。除此之外，容器的行为如预期的那样，即它居中。

我在这里错过了什么？

来源

2013-04-18 olemara

注意：我在此处使用Twitter引导程序作为Yii的添加项。应该不是问题。 – olemara

边框将像素添加到宽度，因此span4现在从300px增加到302px（border-left：1px + border-right：1px），因此进入下一行。见here

border: 1px solid red;

你可以给一个背景，而不是边界测试。

检查fiddle

来源

2013-04-18 09:34:18 anpsmn

嗨，感谢您的反馈@anpsmn。你当然是正确的，你会得到一些额外的边框填充。扔我这里的东西是，我正在使用此内部导航和选项卡，这导致了相同的效果，因为这接壤。我对吗？ – olemara

是的，如果没有足够的空间，边框会添加像素，并会使元素到达下一行。 – anpsmn

应用一个border增加了一些宽度您span唱到你的布局。

处理“列样式”的本地引导程序解决方案是.well元素。

HTML

<div class="row"> 
    <div class="span4"> 
     <div class="well well-with-my-style"> 
     </div> 
    </div> 
    <div class="span4"></div> 
    <div class="span4"></div> 
</div>

CSS

.well-with-my-style { 
    border: 1px solid red; 
    background: none; 
    /* whatever... */ 
}

这样的话，你会尊重原生布局，并从.well元素获利，但要记住，你必须覆盖.well样式您拥有（使用.well-with-my-style类）。

来源

2013-04-18 10:09:01 albertedevigo

嗨，谢谢你的反馈@simbirsk。你当然是正确的，你会得到一些额外的边框填充。扔我这里的东西是，我正在使用此内部导航和选项卡，这导致了相同的效果，因为这接壤。我对吗？ – olemara

每个选项卡内的布局都是流畅的时候，选项卡（左侧或右侧，我搁置）不会导致任何问题。我认为这是一个不同的问题。 – albertedevigo

Twitter引导固定布局问题

回答

相关问题