我正在寻找一个使用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%,并删除使span垂直堆叠的'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/
我自己最近才开始使用CSS,所以我不确定这是否是最好的方法,但当我尝试覆盖CSS时,它似乎有所帮助你上面给出的链接:进入CSS样式表并找到与div标签相关的部分(我似乎称之为"#actions")。输入min-width: 800px;
并尝试调整浏览器窗口的大小。然后将像素大小调整为400px,并再次调整大小以进行比较。通过微调,你可以(希望)得到你想要的行为。
试试:http://jsfiddle.net/F39R8/3/
我看到你有适当的引导CSS类,所以我假设你包含的引导文件包含响应式布局的CSS。我删除了它,并添加了非响应版本(http://twitter.github.io/bootstrap/assets/css/bootstrap.css
)。