在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. php 后端跨域请求

    header("Access-Control-Allow-Origin: http://a.com"); // 允许a.com发起的跨域请求 //如果需要设置允许所有域名发起的跨域 ...

  2. 九度OJ题目1003:A+B

    while(cin>>str1>>str2)就行了,多简单,不得不吐槽,九度的OJ真奇葩 题目描述: 给定两个整数A和B,其表示形式是:从个位开始,每三位数用逗号", ...

  3. 负载均衡,会话保持,session同步(转)

    转自:http://bbs.linuxtone.org/thread-18212-1-1.html 一,什么负载均衡一个新网站是不要做负载均衡的,因为访问量不大,流量也不大,所以没有必要搞这些东西.但 ...

  4. ubuntu下ftp服务

    (1).首先用命令检查是否安装了vsftpd vsftpd -version 如果未安装用一下命令安装 sudo apt-get install vsftpd 安装完成后,再次输入vsftpd -ve ...

  5. Spring依赖注入 — util命名空间配置

    要使用<util>标签,必须在XML中加入util名称空间(namespace): xmlns:util="http://http://www.springframework.o ...

  6. 实用的HTML优化技巧

    如何提升Web页面的性能,很多开发人员从多个方面来下手如JavaScript.图像优化.服务器配置,文件压缩或是调整CSS. 很显然HTML 已经达到了一个瓶颈,尽管它是Web开发 界面必备的核心语言 ...

  7. java 获取文件内所有文件名

    package com.xinwen.user.controller; import java.io.File;import java.util.ArrayList;import java.util. ...

  8. java反射机制(先马再看)

    http://blog.csdn.net/sinat_38259539/article/details/71799078

  9. ES6的generator函数

    generator是什么? generator是ES6提供的一种异步编程解决方案,在语法上,可以把它理解为一个状态机,内部封装了多种状态.执行generator,会生成返回一个遍历器对象.返回的遍历器 ...

  10. Gauge----自动化测试工具--使用

    开始吧 1 下载安装gauge(根据官网教程 http://getgauge.io/documentation/user/current/)测试:gauge -v step01 磁盘上新建一个空目录- ...