html - 创建垂直按钮栏

标签 html css twitter-bootstrap-3 kendo-ui responsive-design

我创建了一个贴在屏幕右侧的垂直按钮,但问题是该按钮没有响应,有没有办法使该按钮响应。我正在使用 bootstrap 3 这是按钮的示例代码。

HTML

编辑

我有一个 kendo scheduler我正在尝试将按钮对齐到此 kendo scheduler 的右侧

  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-left: -1%;">
    <div kendo-tooltip k-content="vm.theContent" k-filter="'.k-event'" class="k-group" style="background:white;border-top: 2px solid #b1b1b1;">
      <div id="scheduler" kendo-scheduler="vm.scheduler" k-options="vm.schedulerOptions" k-rebind="vm.schedulerOptions">
         <!--something--->
      </div>
    </div>
  </div>

<div class="col-lg-offset-11 col-lg-1 col-md-1 col-sm-1 col-xs-1 vertical-bar" >
   <button class="btn btn-info btn-sm vertical-btns">
     <i class="fa fa-angle-double-up" style="font-size:24px;"></i>
    </button><br>

    <button class="btn btn-info btn-sm vertical-btns">
     <i class="fa fa- angle-double-down" style="font-size:24px;" ></i> 
    </button> 
</div>

CSS

.vertical-bar{
  top: 36.6%;
}

.vertical-btns{
  padding: 11px 10px    !important;
  line-height: 17.6em   !important;
}

最佳答案

您可以像这样使用 btn-group-vertical 的 Bootstrap 类:

 <div class="btn-group-vertical">
      <div class="col-lg-offset-11 col-lg-1 col-md-1 col-sm-1 col-xs-1 vertical-bar" >
    <button class="btn btn-info btn-sm">
     <i class="fa fa-angle-double-up" style="font-size:24px;"></i>
    </button><br>

    <button class="btn btn-info btn-sm">
     <i class="fa fa- angle-double-down" style="font-size:24px;" ></i> 
    </button> 
</div>
    </div>

关于html - 创建垂直按钮栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52091448/

相关文章:

javascript - 'h1 :nth-child(5)' selects 3rd and not 5th child

jquery onmouseover 效果不起作用

asp.net-mvc-4 - 使用 Twitter Bootstrap 3 放置验证消息的最佳实践是什么

html - 如何在 bootstrap 3.3.7 框架内为 html 表单上的边框正确添加 css 选择器序列?

html - 如何让DIV在点击时不断显示文字?

java - Jsoup 清理我的 html

jquery - 使用 Cheerio 正则表达式搜索格式不良的 HTML 的叶节点

javascript - 可接受的动画帧率是多少?

CSS:根据最小图像将一行中的响应图像切割为相同高度

javascript - href 菜单栏上的下拉按钮