bootstrap中form-inline不生效

在container下,

<div class="row">
    <div  class="col-sm-6 col-sm-offset-3">
        <form class="form-inline" role="form">
            {% csrf_token %}
            <input type="hidden" id="index" value="1">
                <div class="form-group">
                    <input  id="keyword" type="text" class="form-control" placeholder="搜索的内容">
                    <input  id="search_2" class="btn btn-sm btn-default" value="搜索">
                </div>
        </form>
    </div>
</div>

原因很简单,包含的是bootstrap.3.0.2.min.css。

使用3.20版本就正常了。

在百度上搜罗教程,比较混乱,使用历史版本的css,结果使用了新版本的语法。

bootstrap中form-inline不生效,布布扣,bubuko.com

时间: 2024-12-18 19:26:16

bootstrap中form-inline不生效的相关文章

在bootstrap中让竖向排列的输入框水平排列

在bootstrap中可以使用自带的样式标记来控制样式,但是同时可以利用最原始的css样式来解决达到需求 如下所示可以看出来两个inline-block就可以使得两个水平排列 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 大体来说

Bootstrap中的less基础

在线编译 因为 less 的语法毕竟相对简单,所以一些在线工具可以很轻松的做到.比如 http://less.cnodejs.net http://www.ostools.net/less  一般都有两个框,左侧输入less,右侧呈现编译的 css,方便在线学习和测试. 修改 bootstrap 中的 less 如下图,入口文件是 bootstrap.less 和 responsive.less 文件—— 这个入口文件 bootstrap.less 是这样引用其他 less 文件的: 了解这份

bootstrap中使用日历控件

在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一个demo: 关于资料中的依赖,截图如下: 关于把Less编译成css,需要安装node, 需要注意的是要定位到build文件夹,然后执行 lessc build_standalone.less  datetimepicker.css 大概意思就是把build_standalone.less转换成c

优化checkbox和radio,类似Bootstrap中的iCheck

checkbox和radio浏览器默认的已经满足不了大众的审美需求,更不用说浏览器之间的差异化,取而代之,优化checkbox和radio的方法也随之诞生了.html结构:单选框为例,简单说明: 其中必需项包括:class="radio" 和 name="名称" <div class="radio" name="sex" value="boy"><ins></ins>&l

bootstrap中dialog水平垂直居中

方法一: HTML: <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">     Launch demo modal </button> <!-- Modal --> <div class="modal fade" id=&q

C++中的inline声明

C++中的inline声明 1. inline函数(摘自C++ Primer的第三版) 在函数声明或定义中函数返回类型前加上关键字inline即把函数指定为内联函数. inline int min(int first, int secend) { /****/ };   inline 函数对编译器而言必须是可见的,以便它能够在调用点(调用这个内联函数的位置)内展开该函数. 与非inline函数不同的是,inline函数必须在调用该函数的每个文本文件中定 义.当然,对于同一程序的不同文件,如果in

JavaWeb开发中form、ajax提交数据Model转化

JavaWeb开发中form.ajax提交数据Model转化 问题 最近学习MongoDB数据库,作为java开发的我,当然需要做个小的web程序来测试一番了.在html中我采取ajax提交方式,因为我要模拟各种类型的数据,基础数据类型.数组.对象等.然而,最终发现了个不同的地方:Form和ajax提交数据,在HttpServletRequest中尽然参数名有所不同. 数据类型 form ajax 基础数据 para=value para=value 数组 para[]={"aaa",

jquery中form中使用submit出现的问题,未解决

$("#login_btn").click(function(){在type为submit的按钮下 if($("#id_password").val().length == 0){//检验密码是否为空 $('form').submit(function(){ alert("1") return false; }); }else if($("#vali").val() != code){//验证码是否正确 $('form').s

asp.net MVC中form提交和控制器接受form提交过来的数据

MVC中form提交和在控制器中怎样接受 1.cshtml页面form提交2.控制器处理表单提交数据4种方式方法1:使用传统的Request请求取值[HttpPost]public ActionResult AddNews(){    string a=Request["text1"];    string b=Request["text2"];}方法2:Action参数名与表单元素name值一一对应[HttpPost]public ActionResult Add