屏幕调整大小和选项选择时拆分按钮下拉换行
Split-button dropdown line wrap on screen resize and option selection
我正在使用拆分按钮下拉菜单,我想知道是否有办法停止下拉按钮的换行?
之前,我有
<div class="btn-group btn-block"> // btn-block
即使调整屏幕大小时,拆分按钮也会换行:
但我找到了解决方法 (GitHub Issue Link)
<div class="btn-group" style="width:100px;"> // Removed btn-block class, added style
但是现在,如果我 select 从下拉列表中选择一个选项,它会再次被包裹,无论屏幕 size/column 宽度如何(这个问题在我有btn-block class 只要列中有足够的空间):
无论屏幕大小或选项 selected,我都希望下拉菜单不换行。另外,我确实使用 col-md-*
设置了列的宽度
此外,当一个长选项被 selected 时,它开始重叠到下一列:
我希望我提供了足够的信息来发起有意义的回复。
<div class="col-lg-10" id="mapColumn">
<div>
<table class="table table-condensed tablesaw tablesaw-stack table-striped-column" data-tablesaw-mode="stack" id="table2">
<thead>
<tr>
<th class="col-md-2">Map Actions</th>
<th class="col-md-2">DB Actions</th>
<th class="col-md-1">ID</th>
<th class="col-md-3">Name</th>
<th class="col-md-3">Features</th>
<th class="col-md-1">Rating</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<!-- <div class="btn-group btn-block"> -->
<div class="btn-group" style="width:100px;">
<button type="button" class="btn btn-sm btn-success">Actions</button>
<button type="button" class="btn btn-sm btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="mapActions">
<li><a>TOGGLE Map</a></li>
<li><a>ROTATE View</a></li>
<li><a>SAVE Pic to PC</a></li>
</ul>
</div>
</td>
<td>
<!-- <div class="btn-group btn-block"> -->
<div class="btn-group" style="width:100px;">
<button type="button" class="btn btn-sm btn-success">Actions</button>
<button type="button" class="btn btn-sm btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="dbActions">
<li><a>UPDATE Features</a></li>
<li><a>SAVE POV to DB</a></li>
</ul>
</div>
</td>
<td>123456</td>
<td>Street A & Street B and a very very very long name</td>
<td>
<span class="label label-success">Label One</span>
<span class="label label-success">Label Two</span>
<span class="label label-success">Label Three</span>
<span class="label label-success">Label Four</span>
</td>
<td>★★★★★</td>
</tr>
</tbody>
</table>
</div>
您可以添加这些样式:
.btn-group {
white-space: nowrap;
font-size: 0;
}
.btn-group-vertical>.btn, .btn-group>.btn {
display:inline-block;
float:none;
}
基本上这使得 .btn
元素内联,这反过来允许它利用 nowrap
空白间距。我还必须将按钮组设置为 font-size:none
以删除按钮之间的间距,但 Twitter Bootstrap 为按钮字体大小设置了一个非相对的像素值,因此设置 font-size:0
.btn-group
应该不是问题。我从 .btn
中删除了浮动,最后,删除了标记中 100px
的固定宽度。
https://jsfiddle.net/jmarikle/b4qtrfmb/
编辑:
或者,您也应该能够使用 display:flex
.btn-group, .btn-group-vertical {
display:flex;
}
.btn-group-vertical>.btn, .btn-group>.btn {
display:inline-flex;
float:none;
}
我正在使用拆分按钮下拉菜单,我想知道是否有办法停止下拉按钮的换行?
之前,我有
<div class="btn-group btn-block"> // btn-block
即使调整屏幕大小时,拆分按钮也会换行:
但我找到了解决方法 (GitHub Issue Link)
<div class="btn-group" style="width:100px;"> // Removed btn-block class, added style
但是现在,如果我 select 从下拉列表中选择一个选项,它会再次被包裹,无论屏幕 size/column 宽度如何(这个问题在我有btn-block class 只要列中有足够的空间):
无论屏幕大小或选项 selected,我都希望下拉菜单不换行。另外,我确实使用 col-md-*
设置了列的宽度此外,当一个长选项被 selected 时,它开始重叠到下一列:
我希望我提供了足够的信息来发起有意义的回复。
<div class="col-lg-10" id="mapColumn">
<div>
<table class="table table-condensed tablesaw tablesaw-stack table-striped-column" data-tablesaw-mode="stack" id="table2">
<thead>
<tr>
<th class="col-md-2">Map Actions</th>
<th class="col-md-2">DB Actions</th>
<th class="col-md-1">ID</th>
<th class="col-md-3">Name</th>
<th class="col-md-3">Features</th>
<th class="col-md-1">Rating</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<!-- <div class="btn-group btn-block"> -->
<div class="btn-group" style="width:100px;">
<button type="button" class="btn btn-sm btn-success">Actions</button>
<button type="button" class="btn btn-sm btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="mapActions">
<li><a>TOGGLE Map</a></li>
<li><a>ROTATE View</a></li>
<li><a>SAVE Pic to PC</a></li>
</ul>
</div>
</td>
<td>
<!-- <div class="btn-group btn-block"> -->
<div class="btn-group" style="width:100px;">
<button type="button" class="btn btn-sm btn-success">Actions</button>
<button type="button" class="btn btn-sm btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="dbActions">
<li><a>UPDATE Features</a></li>
<li><a>SAVE POV to DB</a></li>
</ul>
</div>
</td>
<td>123456</td>
<td>Street A & Street B and a very very very long name</td>
<td>
<span class="label label-success">Label One</span>
<span class="label label-success">Label Two</span>
<span class="label label-success">Label Three</span>
<span class="label label-success">Label Four</span>
</td>
<td>★★★★★</td>
</tr>
</tbody>
</table>
</div>
您可以添加这些样式:
.btn-group {
white-space: nowrap;
font-size: 0;
}
.btn-group-vertical>.btn, .btn-group>.btn {
display:inline-block;
float:none;
}
基本上这使得 .btn
元素内联,这反过来允许它利用 nowrap
空白间距。我还必须将按钮组设置为 font-size:none
以删除按钮之间的间距,但 Twitter Bootstrap 为按钮字体大小设置了一个非相对的像素值,因此设置 font-size:0
.btn-group
应该不是问题。我从 .btn
中删除了浮动,最后,删除了标记中 100px
的固定宽度。
https://jsfiddle.net/jmarikle/b4qtrfmb/
编辑:
或者,您也应该能够使用 display:flex
.btn-group, .btn-group-vertical {
display:flex;
}
.btn-group-vertical>.btn, .btn-group>.btn {
display:inline-flex;
float:none;
}