Questions tagged «twitter-bootstrap-3»

Bootstrap 3是前端框架的第三代,可通过具有吸引力的外观和感觉来加快Web开发速度。与[twitter-bootstrap]标签一起使用

30
使用Twitter Bootstrap 3将列居中
如何在Twitter Bootstrap 3的容器(12列)中将一列大小的div居中? .centered { background-color: red; } <body class="container"> <div class="col-lg-1 col-offset-6 centered"> <img data-src="holder.js/100x100" alt="" /> </div> </body> 运行代码段隐藏结果展开摘要 我想要一个div类.centered,该类在容器内居中。如果有多个divs,我可能会使用一行,但是现在我只想要a div,其大小以一列为中心位于容器内(12列)。 我也不确定上述方法是否足够好,因为其目的不是要抵消div一半。我不需要外部的自由空间,div并且内容的内容div按比例缩小。我想在div外部留出空间以使其均匀分布(缩小直到容器宽度等于一列)。

23
与Bootstrap 3垂直对齐
我正在使用Twitter Bootstrap 3,并且在我想垂直对齐两个时遇到问题div,例如-JSFiddle链接: <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div class="row"> <div class="col-xs-5"> <div style="height:5em;border:1px solid #000">Big</div> </div> <div class="col-xs-5"> <div style="height:3em;border:1px solid #F00">Small</div> </div> </div> 运行代码段隐藏结果展开摘要 Bootstrap中的网格系统使用float: left,而不是display:inline-block,因此该属性vertical-align不起作用。我尝试使用margin-top进行修复,但是我认为这对于响应式设计不是一个好的解决方案。

6
Bootstrap 3中的sr-only是什么?
该类的sr-only用途是什么?是重要的还是我可以删除它?工作正常没有。 这是我的示例: <div class="btn-group"> <button type="button" class="btn btn-info btn-md">Departments</button> <button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Sales</a></li> <li><a href="#">Technical</a></li> <li class="divider"></li> <li><a href="#">Show all</a></li> </ul> </div>



8
容器流体与容器
刚刚下载了3.1,并在文档中找到了... 通过改变你的最外圈任何固定宽度的网格布局成一个全宽度的布局.container来.container-fluid。 往里看bootstrap.css,似乎.container-fluid和.container。两者都有相同的CSS,并且的每个实例.container-fluid都与配对.container,并且所有列类均以百分比指定。 当与示例交流时,我看不出任何区别,因为一切似乎都是流畅的。 因为我是Bootstrap的新手,所以我想我缺少一些东西。有人可以花点时间启发我吗?

17
如何使我的Twitter Bootstrap按钮正确对齐?
我在这里有一个简单的演示: http://jsfiddle.net/HdeZ3/1/ <ul> <li>One <input class="btn pull-right" value="test"></li> <li>Two <input class="btn pull-right" value="test2"></li> </ul> 我有一个无序列表,对于每个列表项,我希望左侧有一个文本,然后有一个右对齐的按钮。我尝试使用向右拉,但这完全弄乱了对齐方式。我究竟做错了什么?



29
具有徽标的Bootstrap 3导航栏
我想将Bootstrap 3默认导航栏与图像徽标一起使用,而不要使用文字商标。在不引起不同屏幕尺寸问题的情况下,这样做的正确方法是什么?我认为这是一个普遍的要求,但是我还没有看到好的代码示例。除了在所有屏幕尺寸上都可以接受的显示外,关键要求是在较小屏幕上的菜单可折叠性。 我尝试仅将IMG标签放在具有navbar-brand类的A标签内,但这导致菜单在我的android手机上无法正常运行。我还尝试增加导航栏类的高度,但这使事情变得更糟。 顺便说一句,我的徽标图像大于导航栏的高度。



10
如何在Bootstrap中将容器垂直居中?
我正在寻找一种将containerdiv 垂直居中放置jumbotron在页面中间的方法。 在.jumbotron必须适应于屏幕的整个高度和宽度。的.containerdiv有一个宽度1025px和应在该页面(垂直中心)的中间。 我希望此页面的大屏幕适应屏幕的高度和宽度,并且容器垂直于大屏幕垂直居中。我该如何实现? .jumbotron { height:100%; width:100%; } .container { width:1025px; } .jumbotron .container { max-width: 100%; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="jumbotron"> <div class="container text-center"> <h1>The easiest and powerful way</h1> <div class="row"> <div class="col-md-7"> <div class="top-bg"></div> </div> <div class="col-md-5 iPhone-features" style="margin-left:-25px;"> <ul class="top-features"> <li> <span><i class="fa fa-random simple_bg …

19
React Js有条件地应用类属性
我想有条件地显示和隐藏此按钮组,具体取决于从父组件传入的内容,如下所示: <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on data } .... var TopicNav = React.createClass({ render: function() { return ( <div className="row"> <div className="col-lg-6"> <div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}"> <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Bulk Actions <span …


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.