在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. linux系统基础优化16条知识汇总

    优化的总结: 1.不用root管理,以普通用户的名义通过sudo授权管理. 2.更改默认的远程连接SSH服务端口,禁止root用户远程连接,甚至 要更改只监听内网IP. 3.定时自动更新服务区时间,使 ...

  2. weblogic的使用

    1.怎么修改weblogic的端口 创建好域之后,去域的下面找到config.xml文件,在里面加上<listen-port>80</listen-port>即可,访问时不用加 ...

  3. (转)regex类(个人理解)

    regex类(个人理解)   C#regex是正则表达式类用于string的处理,查找匹配的字符串.1,先看一个例子Regex regex=new Regex(@”OK“)://我们要在目标字符串中找 ...

  4. 使用text-overflow: ellipsis 处理文本溢的一个小问题

    今天在做一个自定义 select多选 搜索的时候,有这样子的一个需求: 1.点击自定义的一个 选项内容框,下拉可多选项 2.多选项不允许换行,且父溢出拆剪,(单行)溢出部分使用 "...&q ...

  5. windows下安装mongoDB以及配置启动

    1.下载MongoDB的windows版本,有32位和64位版本,根据系统情况下载,下载地址:http://www.mongodb.org/downloads 2.解压缩至D:/mongodb即可 3 ...

  6. 简单docker镜像修改方式

    • 创建Dockerfile,文件内容如下: FROM nps:v1.0.1 ENTRYPOINT ["/usr/bin/init.sh"] • 启动基础镜像:docker run ...

  7. macOS下利用dSYM文件将crash文件中的内存地址转换为可读符号

    一.使用流程 Windows下的程序运行崩溃时,往往可以利用pdb文件快速解析出程序崩溃的具体位置,甚至可以对应到源代码的具体行数.macOS下的symbolicatecrash也具备相应的功能.对应 ...

  8. 书写Css文件要点

    1. 自定义样式名 实例1:<style type="text/css"> input.ng-invalid{ // .号一定要在对应的元素名后面, 没有空格 colo ...

  9. linux内核管理

      一  linux组成:kernel.库.rootfs.程序 1.kernel的功能: 1) kernel提供的功能都通过系统调用给用户接口 2) kernel包括:进程管理 .内存管理 .网络管理 ...

  10. Docker(四):Docker 三剑客之 Docker Compose

    前两篇文章我们介绍了 Dockerfile 的使用Docker(二):Dockerfile 使用介绍,我们知道使用一个 Dockerfile 模板文件可以定义一个单独的应用容器,如果需要定义多个容器就 ...