在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. log4j输出日志到数据库中

    1.log4j配置 ###----------------- appender:DATABASE_LOG -----------------#指定输出日志的等级和日志输出范围log4j.logger. ...

  2. Oracle数据库中in()参数超过一千报错代码报错

    转载请注明出处:http://www.cnblogs.com/xunzhaorendaxia/p/8570604.html 解决方案将select * from tablename where fie ...

  3. URL中“#”

    2010年9月,twitter改版.一个显著变化,就是URL加入了"#!"符号.比如,改版前的用户主页网址为http://twitter.com/username改版后,就变成了h ...

  4. STM32F10x的启动汇编分析

    ;******************** (C) COPYRIGHT 2009 STMicroelectronics ********************;* File Name         ...

  5. 反射、Attribute

    1.发射是对类或者对象,查看其类内部的构造. 2.类的组成:属性(PropertyInfo).方法(MethodInfo).字段(FiedInfo).构造函数(ConstructorInfo).事件( ...

  6. java继承与覆写小练习

    最近学习java到了继承的部分,写个小程序用以巩固. import java.util.Scanner;//导入输入包public class testfather { public static v ...

  7. http进阶

    前言: 上一篇博文已经说到了,apache2.4简单的配置,端口,持久连接,MPM,DSO,路径下基于来源控制,页面特性,日志设置 安全域,虚拟主机等等. 一:URL URL是互联中获取标记资源的方式 ...

  8. IIS支持PHP文件解析

    打开IIS程序映射 添加模块映射 请求路径为:*.php 模块为:FastCgiModule 可执行路径选择 php-cgi.exe 名称随意写

  9. Numpy库(个人学习笔记)

    一样,咱的计算机还是得先拥有Python,并且安装了Numpy库.有疑问的话可以看这里呦~~~~ 下面开讲: NumPy的主要对象是齐次多维数组.它是一个元素表(通常是数字),并且都是相同类型,由正整 ...

  10. CentOS7安装最新版git教程

    下载编译工具 yum -y groupinstall "Development Tools" 下载依赖包 yum -y install zlib-devel perl-ExtUti ...