我想使用 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 的链接:
尝试调整大小,您就会明白我在说什么。
最佳答案
一旦浏览器调整到小于 768px
,Bootstrap 将所有列 (span*) 的宽度设置为 100% 并删除使跨度垂直堆叠的“ float ”。您可以在 CSS 中使用 @media 查询来覆盖它。
@media (max-width: 767px) {
.row .span9 {
float:left;
width:68%;
}
.row .span3 {
float:left;
width:28%;
}
}
关于css - 当浏览器宽度太小时,列会缩回,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16682024/