标签: twitter-bootstrap-3

如何在Twitter Bootstrap 3中将容器中的一个列大小的div(12列)居中.

请看起初小提琴.

.centered {
  background-color: red;
}

所以,我想要一个div类.centered,在容器中居中.如果有多个div,我可以使用一行,但是现在我只想要一个在容器中居中的一列大小的div(12列).

我也不确定上述方法是否足够好,因为意图不是要抵消div一半.我不需要外面的自由空间div和div收缩比例的内容.我想将div外部空间均匀分布(缩小到容器宽度==一列).

我正在使用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它来修复它,但我认为这对于响应式设计来说不是一个好的解决方案.

什么是班级 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>

我将如何修改CSS以更改Twitter Bootstrap中导航栏的颜色？

是什么之间的差异col-lg-*,col-md-*并col-sm-*在Twitter的引导？

刚下载3.1并在文档中找到...

通过改变你的最外圈任何固定宽度的网格布局成一个全宽度的布局.container来.container-fluid.

看bootstrap.css,它似乎.container-fluid是相同的.container.两者都具有相同的CSS,并且每个实例.container-fluid都与之配对.container,并且所有列类都以百分比指定.

当看到示例时,我看不出任何差异,因为一切看起来都很流畅.

由于我是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>

我有一个无序列表,对于每个列表项,我希望左边有文本,然后是右对齐按钮.我试图使用右拉,但这完全弄乱了对齐.我究竟做错了什么？

文件CSS夹中包含两个文件,其中包含.map文件扩展名.他们是:

bootstrap-theme.css.map
bootstrap.css.map

它们似乎是缩小文件但我不知道它们的用途.

我对新Bootstrap中的网格系统感到困惑,尤其是这些类:

col-lg-*
col-md-*
col-xs-*

(其中*代表一些数字).

任何人都可以解释以下内容:

1. 这个数字是如何对齐网格的？
2. 如何使用这些数字？
3. 什么他们实际上代表什么呢？

我想使用带有图像徽标而不是文本标记的Bootstrap 3默认导航栏.在不引起不同屏幕尺寸问题的情况下,这样做的正确方法是什么？我认为这是一个常见的要求,但我还没有看到一个好的代码示例.除了在所有屏幕尺寸上具有可接受的显示之外的关键要求是较小屏幕上的菜单可折叠性.

我试过把一个IMG标签放在带有navbar-brand类的A标签内,但这导致菜单在我的Android手机上无法正常运行.我也试过增加导航栏类的高度,但这更加困难了.

顺便说一句,我的徽标图像大于导航栏的高度.