css – 当浏览器宽度太小时向下包装的列

2023年11月8日 191次阅读

我正在寻找一个使用Twitter Bootstrap的小边栏.

我希望段落文本能够自由包装,我总是想要右侧的按钮.但是,每当浏览器从全屏调整大小以具有较小宽度时,垂直按钮组将下降到下一行并占据while窗口的宽度.丑陋.我该怎么做才能改变这个？

基本上,我正在看这样的代码：

<div class="container">
  <div class="row" style="margin-top: 10px;">
    <div class="span9 citation-text">
      <p class="citation-text">Here is a ton of text that is supposed to be a citation
      but I'm hoping it'll wrap that's why it's not a citation. And yet it doesn't wrap
      so it looks like I'll have to keep writing and writing until it does.</p>
    </div>
    <div class="span3 vertical-btn-group citation-options">
      <input type="button" class="btn btn-small btn-block btn-info citation-edit"
      value="Edit" /> <input type="button" class=
      "btn btn-small btn-block btn-danger citation-remove" value="Remove" />
      <input type="button" class=
      "btn btn-small btn-block btn-warning citation-highlight" value="Highlight" />
    </div>
  </div>
</div>

这是JSFiddle的链接：

http://jsfiddle.net/F39R8/

玩大小调整,你会看到我在说什么.

最佳答案 将浏览器的大小调整为小于768px后,Bootstrap将所有列(span *)宽度设置为100％并移除“float”,使跨度垂直堆叠.您可以使用CSS中的@media查询覆盖它.

@media (max-width: 767px) {
    .row .span9 {
        float:left;
        width:68%;
    }
    .row .span3 {
        float:left;
        width:28%;
    }
}

http://jsfiddle.net/skelly/F39R8/2/

点赞