71
在問候BS 3，如果我想在我可能會使用偏移種類的9和3引導3抵消權沒有離開
但是列權的內容只是一個窄列，如果我想要反向和左側？有沒有在BS中做到這一點的正確方法，或者我應該使用自己的CSS方法嗎？我正在考慮用我的內容創建一列3，並且只是一個空列9.
A
回答
76
引導行始終包含它們的浮點數並創建新行。您不必擔心填充空白列，只是確保他們加起來不超過12
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-3 col-xs-offset-9">
I'm a right column of 3
</div>
</div>
<div class="row">
<div class="col-xs-3">
I'm a left column of 3
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
And I'm some content below both columns
</div>
</div>
</div>
69
我用下面這個簡單的自定義CSS我寫的爲了達成這個。
.col-xs-offset-right-12 {
margin-right: 100%;
}
.col-xs-offset-right-11 {
margin-right: 91.66666667%;
}
.col-xs-offset-right-10 {
margin-right: 83.33333333%;
}
.col-xs-offset-right-9 {
margin-right: 75%;
}
.col-xs-offset-right-8 {
margin-right: 66.66666667%;
}
.col-xs-offset-right-7 {
margin-right: 58.33333333%;
}
.col-xs-offset-right-6 {
margin-right: 50%;
}
.col-xs-offset-right-5 {
margin-right: 41.66666667%;
}
.col-xs-offset-right-4 {
margin-right: 33.33333333%;
}
.col-xs-offset-right-3 {
margin-right: 25%;
}
.col-xs-offset-right-2 {
margin-right: 16.66666667%;
}
.col-xs-offset-right-1 {
margin-right: 8.33333333%;
}
.col-xs-offset-right-0 {
margin-right: 0;
}
@media (min-width: 768px) {
.col-sm-offset-right-12 {
margin-right: 100%;
}
.col-sm-offset-right-11 {
margin-right: 91.66666667%;
}
.col-sm-offset-right-10 {
margin-right: 83.33333333%;
}
.col-sm-offset-right-9 {
margin-right: 75%;
}
.col-sm-offset-right-8 {
margin-right: 66.66666667%;
}
.col-sm-offset-right-7 {
margin-right: 58.33333333%;
}
.col-sm-offset-right-6 {
margin-right: 50%;
}
.col-sm-offset-right-5 {
margin-right: 41.66666667%;
}
.col-sm-offset-right-4 {
margin-right: 33.33333333%;
}
.col-sm-offset-right-3 {
margin-right: 25%;
}
.col-sm-offset-right-2 {
margin-right: 16.66666667%;
}
.col-sm-offset-right-1 {
margin-right: 8.33333333%;
}
.col-sm-offset-right-0 {
margin-right: 0;
}
}
@media (min-width: 992px) {
.col-md-offset-right-12 {
margin-right: 100%;
}
.col-md-offset-right-11 {
margin-right: 91.66666667%;
}
.col-md-offset-right-10 {
margin-right: 83.33333333%;
}
.col-md-offset-right-9 {
margin-right: 75%;
}
.col-md-offset-right-8 {
margin-right: 66.66666667%;
}
.col-md-offset-right-7 {
margin-right: 58.33333333%;
}
.col-md-offset-right-6 {
margin-right: 50%;
}
.col-md-offset-right-5 {
margin-right: 41.66666667%;
}
.col-md-offset-right-4 {
margin-right: 33.33333333%;
}
.col-md-offset-right-3 {
margin-right: 25%;
}
.col-md-offset-right-2 {
margin-right: 16.66666667%;
}
.col-md-offset-right-1 {
margin-right: 8.33333333%;
}
.col-md-offset-right-0 {
margin-right: 0;
}
}
@media (min-width: 1200px) {
.col-lg-offset-right-12 {
margin-right: 100%;
}
.col-lg-offset-right-11 {
margin-right: 91.66666667%;
}
.col-lg-offset-right-10 {
margin-right: 83.33333333%;
}
.col-lg-offset-right-9 {
margin-right: 75%;
}
.col-lg-offset-right-8 {
margin-right: 66.66666667%;
}
.col-lg-offset-right-7 {
margin-right: 58.33333333%;
}
.col-lg-offset-right-6 {
margin-right: 50%;
}
.col-lg-offset-right-5 {
margin-right: 41.66666667%;
}
.col-lg-offset-right-4 {
margin-right: 33.33333333%;
}
.col-lg-offset-right-3 {
margin-right: 25%;
}
.col-lg-offset-right-2 {
margin-right: 16.66666667%;
}
.col-lg-offset-right-1 {
margin-right: 8.33333333%;
}
.col-lg-offset-right-0 {
margin-right: 0;
}
}
+1
對百分比進行硬編碼是非常不理想的。此外，可以更改Bootstrap網格系統的工作方式，因此不保證有12列。在這種情況下，這個答案失敗。您最好計算相對於網格列數的百分比。 –
+2
引導程序僅從左側的 – Scott
7
<div class="row">
<div class="col-md-10 col-md-pull-2">
col-md-10 col-md-pull-2
</div>
<div class="col-md-10 col-md-pull-2">
col-md-10 col-md-pull-2
</div>
</div>
15
我改性基於Rukshan's answer
引導SASS（v3.3.5）在mixins/_grid-framework.scss的calc-grid-column混入的末尾添加該正下方的$type == offset如果條件。
@if ($type == offset-right) {
.col-#{$class}-offset-right-#{$index} {
margin-right: percentage(($index/$grid-columns));
}
}
修改make-grid混入在mixins/_grid-framework.scss生成offset-right類。
// Create grid for specific class
@mixin make-grid($class) {
@include float-grid-columns($class);
@include loop-grid-columns($grid-columns, $class, width);
@include loop-grid-columns($grid-columns, $class, pull);
@include loop-grid-columns($grid-columns, $class, push);
@include loop-grid-columns($grid-columns, $class, offset);
@include loop-grid-columns($grid-columns, $class, offset-right);
}
然後，您可以使用類，如col-sm-offset-right-2和col-md-offset-right-1
+0
+1執行相同的操作，以使用「百分比」而不是對值進行硬編碼;這更接近於Bootstrap內部處理網格系統的方式，如果默認12是不希望的，則它允許可變網格列。 –
+0
請在第二段中將'mixins/_grid_framework.scss'更新爲'mixins/_grid-framework.scss' – Zanshin13
0
基於WeNeigh's answer！這裏是一個LESS例如
.col-offset-right(@i, @type) when (@i >= 0) {
[email protected]{type}[email protected]{i} {
margin-right: percentage((@i/@grid-columns));
}
.col-offset-right(@i - 1, @type);
};
.col-offset-right(@grid-columns, xs);
.col-offset-right(@grid-columns, sm);
.col-offset-right(@grid-columns, md);
.col-offset-right(@grid-columns, lg);
0
這裏是相同的解決方案比Rukshan但SASS（爲了保持你的網格配置）的特殊情況，不與羅斯·艾倫的解決方案工作（當你不能有父div.row）
@mixin make-grid-offset-right($class) {
@for $index from 0 through $grid-columns {
.col-#{$class}-offset-right-#{$index} {
margin-right: percentage(($index/$grid-columns));
}
}
}
@include make-grid-offset-right(xs);
@media (min-width: $screen-sm-min) {
@include make-grid-offset-right(sm);
}
@media (min-width: $screen-md-min) {
@include make-grid-offset-right(md);
}
@media (min-width: $screen-lg-min) {
@include make-grid-offset-right(lg);
}
相關問題
- 1. 是什麼抵消引導4嗎？
- 2. 開芝麻抵消
- 3. 應該抵消（）。top有沒有變化
- 4. 如何抵消CSS邊框起身離開
- 5. jQuery Datepicker：抵達和離開textfields？
- 6. 引導3 datetimepicker事件沒有發射
- 7. Glyphicons在引導3沒有出現
- 8. PHP：未定義抵消：3 - preg_match_all
- 9. 抵消現有的風格
- 10. 引導4不能得到抵消山坳工作
- 11. 抵消scrollTop的
- 12. datepicker.iso8601Week抵消
- 13. 抵消UIRefreshControl
- 14. DatetimeIndex抵消
- 15. 計算抵消
- 16. 我在哪裏離開freeglut.dll沒有管理員權限？
- 17. xgboost，抵消風險？
- 18. PHP抵消錯誤
- 19. mysql - 抵消問題
- 20. 的UITableView：抵消selectedBackgroundView
- 21. UIGestureRecognizer抵消的TargetView
- 22. 非法抵消laravel
- 23. 非法抵消PHP
- 24. 什麼是抵消？
- 25. 理解stripos抵消？
- 26. 抵消了統一
- 27. GOOGLEMAPS得到抵消
- 28. 防止面板開啓引導3
- 29. 引導3 - 展開和摺疊錶行
- 30. 開關兩個引導場3
只是想知道如何得到這些計算器代碼「運行的代碼片斷」按鈕 – pahan
可運行的代碼片斷上個月推出。 Stack Overflow的博客文章解釋瞭如何使用它們：http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ –
對於空白列，使用Bootstrap的col -X-pull-Y'類。例如，要向右推動50％大小的東西，但將一列空格留在右側（以12列網格爲例）：'col-xs-6 pull-right col-xs-pull-1 ' –