轉爲.btn基團的垂直當移動設備被用於

我想要實現的自舉工具欄按鈕作爲與另外的行爲上getbootstrap.com證實：所有按鈕組應該自動切換到垂直模式，當移動設備被使用。轉爲.btn基團的垂直當移動設備被用於

在我看來，最合適的解決方案是這樣的：

.myClass { 
    @media (max-width: 760px) { 
     &:extend(.btn-group-vertical all); 
    } 
    @media (min-width: 761px) { 
     &:extend(.btn-group all); 
    } 
}

Unfortenately代碼不起作用。據我瞭解，只有在同一媒體範圍內的課程才能以這種方式擴展。

是否有可能解決這一問題，而無需使用JS？

來源

2015-08-08 devwithenth

通過查看如何將所有這些'.btn組-vertical'風格[定義]（https://github.com/twbs/bootstrap/blob/v3.3.5/ less/button-groups.less＃L140-L196），我認爲不是，沒有辦法（不包括簡單地將所有內容複製粘貼到你的'.myClass'）。（還要注意的是，即使沒有'@ media'問題，它也不得不'擴展'，而不僅僅是'擴展'）。 –

太糟糕了！事實上，我忘記了'extend'中的'all'關鍵字，編輯了我的問題。 – devwithenth

我試圖爲你做一個小提琴，我認爲那裏不會是非js選項。你可以用visible-xs類創建第二個div，用隱藏xs類創建主div。 https://jsfiddle.net/9ymkx2u1/ –

你可以使自己的垂直按鈕組。自定義類的.btn-vertical（或任何你想將它命名）添加到.btn-group。

你在技術上只需要下面的CSS但是當按鈕組改變爲垂直方向，你會留下圓形的第一個按鈕左邊框和最後一個按鈕右邊界，這是視覺上不美觀。查看完整CSS的jsfiddle。

body { 
 
    text-align: center; 
 
    padding-top: 50px; 
 
    background-color: grey; 
 
} 
 
@media (max-width: 768px) { 
 
    .btn-vertical { 
 
    position: relative; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    } 
 
    .btn-vertical > .btn, 
 
    .btn-group > .btn { 
 
    position: relative; 
 
    float: left; 
 
    } 
 
    .btn-vertical > .btn, 
 
    .btn-vertical > .btn-group, 
 
    .btn-vertical > .btn-group > .btn { 
 
    display: block; 
 
    float: none; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    } 
 
    .btn-vertical > .btn-group > .btn { 
 
    float: none; 
 
    } 
 
    .btn-vertical>.btn+.btn, 
 
    .btn-vertical>.btn+.btn-group, 
 
    .btn-vertical>.btn-group+.btn, 
 
    .btn-vertical>.btn-group+.btn-group { 
 
    margin-top: -1px; 
 
    margin-left: 0; 
 
    } 
 
    .btn-vertical>.btn:not(:first-child):not(:last-child) { 
 
    border-radius: 0; 
 
    } 
 
    .btn-vertical>.btn:first-child:not(:last-child) { 
 
    border-top-right-radius: 0; 
 
    border-top-left-radius: 0; 
 
    border-bottom-right-radius: 0; 
 
    border-bottom-left-radius: 0; 
 
    } 
 
    .btn-vertical>.btn:last-child:not(:first-child) { 
 
    border-top-left-radius: 0; 
 
    border-top-right-radius: 0; 
 
    border-bottom-left-radius: 0; 
 
    border-bottom-right-radius: 0; 
 
    } 
 
    .btn-vertical>.btn-group:not(:first-child):not(:last-child)>.btn { 
 
    border-radius: 0; 
 
    } 
 
    .btn-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child, 
 
    .btn-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle { 
 
    border-bottom-right-radius: 0; 
 
    border-bottom-left-radius: 0; 
 
    } 
 
    .btn-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child { 
 
    border-top-left-radius: 0; 
 
    border-top-right-radius: 0; 
 
    } 
 
    body { 
 
    background-color: lightblue; 
 
    } 
 
} 
 
.btn-group.btn-group-lg .btn { 
 
    border-radius: 0; 
 
    border: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="media-change"> 
 
    <div class="container"> 
 
    <div class="btn-group btn-group-lg btn-vertical"> 
 
     <button type="button" class="btn btn-primary">Sample</button> 
 
     <button type="button" class="btn">Sample</button> 
 
     <button type="button" class="btn btn-danger">Sample</button> 
 
     <button type="button" class="btn btn-warning">Sample</button> 
 
     <button type="button" class="btn btn-success">Sample</button> 
 
     <button type="button" class="btn btn-default">Sample</button> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-08-08 18:37:13 vanburen

Wel，如果他選擇忽略那些邊界（*可以通過默認的Bootstrap主題以及任何其他具有圓形工具欄按鈕的主題在視覺上引人注目），那麼這個東西可以簡化爲[像這樣]（http：///codepen.io/seven-phases-max/pen/KpEaqm?editors=110）。但我不認爲這是事實。 –

轉爲.btn基團的垂直當移動設備被用於

回答

相關問題