无论屏幕大小如何，都能保持在线状态

Question

当窗口变得非常狭窄时，我有一行不会保持一致。 绿色区块在另一个区块之下，这是正常行为吗？

我的意思是，虽然我认为这是因为它在"row"类中，并且因为我使用的xs列加起来为12，所以无论屏幕的大小如何，它都应该保持一致。

这是我的代码（或者您可以转到bootply）

    <div class="row" style="height:150px">  
      <div class="col-xs-1 bggrey" style="height:100%"></div>
      <div class="col-xs-6 bgblue" style="height:100%"></div>
      <div class="col-xs-2 bgred" style="height:100%"></div>
      <div class="col-xs-3 bggreen" style="height:100%"></div>
    </div>

我对代码的期望（如果窗口不太窄，工作正常）

如果窗户变窄，我会得到什么

Answer 1

我认为是div中默认填充的问题。当分辨率小于它破坏的所有填充的总和时。在你的代码中有4个div，有30个像素的填充，当它非常合适时，就会坏掉。我将填充值设置为零值并且可以正常工作

请参阅：http://www.bootply.com/jaSQxxUZuD#

css的唯一变化是

  .row > div { padding: 0 }

如果你需要保护theese paddings，你可以防止断线：

  .row { white-space: nowrap; }

修改

如果你需要保存这些填充物，那么最好制作内盒

  .row > div { box-sizing: border-box; }

使用这最后一个类，您可以保留填充，但宽度不会像没有填充一样增加。

Answer 2

bool top = false; for(i=10,j=92;i<200 && j>10;) { pDC->SetPixel(i,j,NewColor); Sleep(10); if(!top) j-=1; else j+=1; if(j%4==0) { i+=1; } if(j==12) top=true; if(j==90) top = false; } 的{​​{1}}和col-xs-1为15px，这意味着当屏幕宽度低于330px时，灰条的大小大于宽度的8.333％。< / p>

将填充设置为0以避免此问题。

Answer 3

有不同的可能性来解决这个问题。 将此添加到css至少应该这样做：

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-6{
    padding:0px;
}