Question

我希望使用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/

调整大小，你会看到我在说什么。

Answer 1

将浏览器的大小调整为小于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/

Answer 2

我最近才开始自己使用CSS，所以我不确定这是解决这个问题的最佳方法，但是当我尝试覆盖上面给出的链接的CSS时，它似乎有所帮助：进入CSS样式表并查找与div标签有关的部分（在我看来，它被称为“#actions”）。放入min-width: 800px;并尝试调整浏览器窗口的大小。然后将像素大小调整为400px，并再次调整大小以进行比较。通过微调，你可以（希望）获得你想要的所需行为。

Answer 3

试试这个：http://jsfiddle.net/F39R8/3/

我看到你有适当的Bootstrap CSS类，所以我假设你包含的bootstrap文件包含响应式布局的CSS。我删除了它并添加了无响应的版本（http://twitter.github.io/bootstrap/assets/css/bootstrap.css）。

当浏览器宽度太小时向下包裹的列

3 个答案: