Fatal编程技术网

Twitter bootstrap 带分段按钮的输入组（Bs-4-alpha）

twitter-bootstrap bootstrap-4

Twitter bootstrap 带分段按钮的输入组（Bs-4-alpha）,twitter-bootstrap,bootstrap-4,twitter-bootstrap-4,Twitter Bootstrap,Bootstrap 4,Twitter Bootstrap 4,在引导4的输入组中箭头显示在操作按钮下： 行动 切换下拉列表 .输入组btn { 显示：表格单元格； } 行动 切换下拉列表 面向flexbox的解决方案（作为公认解决方案的补充）： 默认样式为，因此按钮是堆叠的 。输入组btn { 弯曲方向：行！重要； } 行动 切换下拉列表 在代码中添加样式标记。那么它应该是这样的。看起来是一个解决方案。这是一个“黑客”还是在文档中有关于这个的东西？在任何文档中都没有给出。Bootstrap 4正在使用flex显示，我刚刚将其更改为BS3中给出的表格

在引导4的
输入组中
箭头显示在操作按钮下： 

行动
切换下拉列表


.输入组btn
{
显示：表格单元格；
}
行动
切换下拉列表
面向flexbox的解决方案（作为公认解决方案的补充）：

默认样式为，因此按钮是堆叠的

。输入组btn
{
弯曲方向：行！重要；
}

行动
切换下拉列表
在代码中添加样式标记。那么它应该是这样的。看起来是一个解决方案。这是一个“黑客”还是在文档中有关于这个的东西？在任何文档中都没有给出。Bootstrap 4正在使用flex显示，我刚刚将其更改为BS3中给出的表格单元格。：-）谢谢，我接受你的回答。我还发现了一个面向flexbox的解决方案：
。输入组btn{flex direction:row；}
（默认情况下是
列
），请将解决方案作为未在代码中更新的答案发布。我已经回退了，但请将您的解决方案作为答案发布。谢谢。@Bugs结束。我将原始代码片段放入问题中，将修改后的代码片段放入答案中 
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<style>
.input-group-btn
{
    display: table-cell;
}
</style>
<div class="container">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
      <div class="input-group-btn">
        <button type="button" class="btn btn-primary">Action</button>
        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
    </div>
</div>

 <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

</body>
</html>

.input-group-btn
{
  flex-direction: row !important;
}