在bootstrap中,怎么把一个按钮垂直居中,水平靠左边

LinuxCard 2017-08-01 11:28:02
http://jsrun.net/9GYKp/edit

这里是demo,我想把查询按钮垂直居中,应该怎么弄呢、
...全文
6143 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
tanshile7662 2017-08-04
  • 打赏
  • 举报
回复
bootstrap是什么?
jio可 2017-08-01
  • 打赏
  • 举报
回复

<form role="form" class="form-horizontal" id="query_from">
    <div class="col-sm-10">
        <div class="form-group ">
            <label class="col-sm-5 control-label">
                仓单编号
            </label>
            <div class="col-sm-5">
                <input class="form-control" type="text" name="CangDanBianHao" placeholder="模糊搜索"
                />
            </div>
        </div>
        <div class="form-group ">
            <label class="col-sm-5 control-label">
                客户
            </label>
            <div class="col-sm-5">
                <select class="form-control" name="GuestID">
                    <option>
                    </option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-5 control-label">
                商品
            </label>
            <div class="col-sm-5">
                <select class="form-control" name="GoodsID">
                    <option>
                    </option>
                </select>
            </div>
        </div>
        <div class="form-group ">
            <label class="col-sm-5 control-label">
                仓库
            </label>
            <div class="col-sm-5">
                <select class="form-control" name="WarehouseID">
                    <option>
                    </option>
                </select>
            </div>
        </div>
        <div class="col-sm-5" style="text-align:center">
            <button class="btn btn-primary" onclick=" return refresh_table()">
                查询
            </button>
        </div>
    </div>
</form>
这样才正常吧
LinuxCard 2017-08-01
  • 打赏
  • 举报
回复
jio可 2017-08-01
  • 打赏
  • 举报
回复

<div class="col-sm-2 " style="line-height: 90px;">
     <button class="btn btn-primary vertical-center " onclick=" return refresh_table()" style="">查询</button>
</div>
LinuxCard 2017-08-01
  • 打赏
  • 举报
回复
引用 2 楼 u012418098 的回复:

<form role="form" class="form-horizontal" id="query_from">
    <div class="col-sm-10">
        <div class="form-group ">
            <label class="col-sm-5 control-label">
                仓单编号
            </label>
            <div class="col-sm-5">
                <input class="form-control" type="text" name="CangDanBianHao" placeholder="模糊搜索"
                />
            </div>
        </div>
        <div class="form-group ">
            <label class="col-sm-5 control-label">
                客户
            </label>
            <div class="col-sm-5">
                <select class="form-control" name="GuestID">
                    <option>
                    </option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-5 control-label">
                商品
            </label>
            <div class="col-sm-5">
                <select class="form-control" name="GoodsID">
                    <option>
                    </option>
                </select>
            </div>
        </div>
        <div class="form-group ">
            <label class="col-sm-5 control-label">
                仓库
            </label>
            <div class="col-sm-5">
                <select class="form-control" name="WarehouseID">
                    <option>
                    </option>
                </select>
            </div>
        </div>
        <div class="col-sm-5" style="text-align:center">
            <button class="btn btn-primary" onclick=" return refresh_table()">
                查询
            </button>
        </div>
    </div>
</form>
这样才正常吧
这个表单是查询用,所以是并排排列的
Bootstrap官网上原文复制粘贴,将其整理的 Bootstrap入门教学文档。 Bootstrap 简介 8 什么是 Bootstrap? 8 历史 9 为什么使用 Bootstrap? 9 Bootstrap 包的内容 9 Bootstrap 环境安装 11 下载 Bootstrap 11 文件结构 12 HTML 模板 12 实例 13 Bootstrap CSS 概览 15 HTML 5 文档类型(Doctype) 15 移动设备优先 15 响应式图像 16 全局显示、排版和链接 16 避免跨浏览器的不一致 18 容器(Container) 18 Bootstrap 网格系统 20 什么是网格(Grid)? 20 什么是 Bootstrap 网格系统(Grid System)? 20 Bootstrap 网格系统(Grid System)的工作原理 21 媒体查询 21 网格选项 22 响应式的列重置 23 偏移列 25 嵌套列 26 列排序 28 Bootstrap 排版 31 标题 31 引导主体副本 33 强调 34 缩写 35 地址(Address) 36 引用(Blockquote) 37 列表 38 Bootstrap 代码 41 实例 41 Bootstrap 表格 43 基本的表格 43 可选的表格类 44 上下文类 50 响应式表格 52 Bootstrap 表单 54 表单布局 54 支持的表单控件 58 静态控件 63 表单控件状态 64 表单控件大小 67 表单帮助文本 69 Bootstrap 按钮 71 按钮大小 72 按钮状态 74 按钮标签 77 Bootstrap 图像 79 Bootstrap 帮助器类 80 关闭图标 80 插入符 80 快速浮动 81 居内容块 82 清除浮动 82 显示和隐藏内容 83 屏幕阅读器 84 Bootstrap 响应式实用工具 86 打印类 86 实例 86 Bootstrap 字形图标(Glyphicons) 89 什么是字形图标(Glyphicons)? 89 获取字形图标(Glyphicons) 89 CSS 规则解释 89 用法 91 带有导航栏的字形图标(Glyphicons) 92 定制字形图标(Glyphicons) 93 Bootstrap 下拉菜单(Dropdowns) 95 选项 96 Bootstrap 按钮组 100 基本的按钮组 101 按钮工具栏 101 按钮的大小 102 嵌套 103 垂直的按钮组 104 Bootstrap 按钮下拉菜单 106 分割的按钮下拉菜单 107 按钮下拉菜单的大小 108 按钮上拉菜单 110 Bootstrap 输入框组 112 基本的输入框组 112 输入框组的大小 113 复选框和单选插件 115 按钮插件 116 带有下拉菜单的按钮 117 分割的下拉菜单按钮 119 Bootstrap 导航元素 121 表格导航或标签 121 胶囊式的导航菜单 122 两端对齐的导航 124 禁用链接 125 下拉菜单 126 Bootstrap 导航栏 130 默认的导航栏 130 响应式的导航栏 131 导航栏的表单 133 导航栏按钮 134 导航栏的文本 135 非导航链接 136 组件对齐方式 137 固定到顶部 139 固定到底部 140 静态的顶部 141 倒置的导航栏 143 路径导航 145 Bootstrap 分页 146 分页(Pagination) 146 翻页(Pager) 149 Bootstrap 标签 153 Bootstrap 徽章(Badges) 155 激活导航状态 155 Bootstrap 超大屏幕(Jumbotron) 158 Bootstrap 页面标题(Page Header) 161 Bootstrap 缩略图 162 添加自定义的内容 163 Bootstrap 警告(Alerts) 167 可取消的警告(Dismissal Alerts) 168 警告(Alerts)的链接 170 Bootstrap 进度条 172 默认的进度条 172 交替的进度条 173 条纹的进度条 174 动画的进度条 175 堆叠的进度条 176 Bootstrap 多媒体对象(Media Object) 178 Bootstrap 列表组 184 向列表组添加徽章 185 向列表组添加链接 186 向列表组添加自定义内容 187 Bootstrap 面板(Panels) 190 面板标题 190 面板脚注 192 带语境色彩的面板 192 带表格的面板 194 带列表组的面板 196 Bootstrap Wells 198 尺寸大小 198 B

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧