在bootstrap中可以使用自带的样式标记来控制样式,但是同时可以利用最原始的css样式来解决达到需求

如下所示可以看出来两个inline-block就可以使得两个水平排列

  1. block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。
  2. 大体来说HTML元素各有其自身的布局级别(block元素还是inline元素):
    • 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
    • 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
  3. block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。比如 P 元素,只能包含inline元素,而不能包含block元素。
  4. 一般来说,可以通过display:inline和display:block的设置,改变元素的布局级别。
  5. 感谢:http://www.cnblogs.com/KeithWang/p/3139517.html

<div class="form-item">
<div style="display:inline-block;">
<label class="item-label">日期<span class="check-tips">(请选择开始日期)</span></label>
<div class="controls">
<input id="begin_time" type="text" class="text input-large" name="minDated" value="{$minDated|default=''}" placeholder="请选择开始日期">
</div>
</div>
<div style="display:inline-block;">
<label class="item-label">日期<span class="check-tips">(请选择结束日期)</span></label>
<div class="controls">
<input id="end_time" type="text" class="text input-large" name="nowDated" value="{$nowDated|default=''}" placeholder="请选择结束日期">
</div>
</div>
</div>

在bootstrap中让竖向排列的输入框水平排列的更多相关文章

  1. bootstrap课程5 bootstrap中的组件使用的注意事项是什么

    bootstrap课程5 bootstrap中的组件使用的注意事项是什么 一.总结 一句话总结: 1.img-responsive的作用是什么(其实还是要多看手册)? 看起来像width=100%的效 ...

  2. Bootstrap 中的 Typeahead 组件 -- AutoComplete

    Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单 ...

  3. Bootstrap中的less基础

    在线编译 因为 less 的语法毕竟相对简单,所以一些在线工具可以很轻松的做到.比如 http://less.cnodejs.net http://www.ostools.net/less  一般都有 ...

  4. Bootstrap中的 Typeahead 组件

    Bootstrap 中的 Typeahead 组件其实就是嵌入到其中的typeahead.js插件,可以完成输入框的自动匹配功能,在通过一些人工的调整基本可以胜任所有的匹配功能和场景,下面介绍下简单的 ...

  5. Bootstrap中datetimepicker日期控件1899年问题解决

    Bootstrap中datetimepicker日期控件1899年问题解决 最近在开发项目的过程中,遇到一个很尴尬的问题.我们项目一直采用的是angular+bootstrap,日期控件用的是boot ...

  6. bootstrap中固定table的表头

    前端时间鼓捣的一个简单的手机站点,今天又拿出来弄一弄 由于主要是给手机訪问.用的是bootstrap响应式布局,今天的任务是做一个数据展示页面 可是因为数据的列比較多.所以横向显示不下,为了较好的显示 ...

  7. bootstrap课程3 bootstrap中常用的排版样式有哪些

    bootstrap课程3 bootstrap中常用的排版样式有哪些 一.总结 一句话总结:bootstrap里面对常用表情比如p.h1.code等html中的常用表情都修改了样式,照着手册用就好,样式 ...

  8. js轮播图和bootstrap中的轮播图

    js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...

  9. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

随机推荐

  1. mailgun 发邮件示例代码Python版

    1 首先到mailgun官网注册账号,并激活账号 点击domains,进入默认的域名,最底下那个sandbox域名就是默认的测试域名 如果自己有域名,也可以添加自己的域名测试,具体参考:ssr pan ...

  2. Zabbix JMX之tomcat监控

    工作原理: 1.JAVA-GATEWAY  Zabbix本身不支持直接监控Java,在zabbix 1.8以前,只能使用Zapcat来做代理监控,而且要修改源代码,非常麻烦.所有后来为了解决这个监控问 ...

  3. MongoDB存储引擎(下)——In-Memory

    前两篇文章分别介绍了MMAPv1和WiredTiger,这两个存储引擎都是会将数据持久化存储到硬盘的,除此之外,MongoDB也有只将数据存储在内存的存储引擎,那就是In-Memory. In-Mem ...

  4. js实现html转pdf+html2canvas.js截图不全的问题

    最近做项目中遇到要把整个页面保存为PDF文件,网上找了一下实现的方法都是 html2canvas.js+jsPdf.js 来实现.实现的过程是 先用html2canvas.js把html页面转成图片, ...

  5. WordPress设置圆形旋转头像的方法

    很多网站的评论者的头像都是圆形的,并且当你的鼠标移上去的时候会旋转,那么这个怎么实现呢,我在网上找了很多,但是和我的主题都不适用,现在把我修改后的代码贴出来,只要将下面的代码添加到style.css中 ...

  6. 【Unity3D与23种设计模式】中介者模式(Mediator)

    GoF中定义: 定义一个接口来封装一群对象的互动行为 中介者通过移除对象之间的引用 以减少他们之间的耦合度 并且能改变它们之间的互动独立性 游戏做的越大,系统划分的也就越多 如事件系统,关卡系统,信息 ...

  7. 用于 SELECT 和 WHERE 子句的函数

    一个 SQL 语句中的 select_expression 或 where_definition 可由任何使用了下面所描述函数的表达式组成. 包含 NULL 的表达式总是得出一个 NULL 值结果,除 ...

  8. Mybatis+Mysql插入数据库返回自增主键id值的三种方法

    一.场景: 插入数据库的值需要立即得到返回的主键id进行下一步程序操作 二.解决方法: 第一种:使用通用mapper的插入方法 Mapper.insertSelective(record): 此方法: ...

  9. 通过Performance Log确定磁盘有性能问题?

    一些比较重要的performance counter: Counter Description LogicalDisk\ % Free Space 报告磁盘空间中未被分配的空间占逻辑卷中总可用空间的百 ...

  10. python爬微信公众号前10篇历史文章(6)-话说http cookies

    早期Web开发面临的最大问题之一是如何管理状态.简言之,服务器端没有办法知道两个请求是否来自于同一个浏览器.这是cookies的起源. 什么是cookie? A cookie is a small s ...