简单问题:如何使用引导程序在col中垂直对齐col？这里的示例(我想垂直对齐child1a和child1b):
HTML
<div class="col-lg-12">
<div class="col-lg-6 col-md-6 col-12 child1">
<div class="col-12 child1a">Child content 1a</div>
<div class="col-12 child1b">Child content 1b</div>
</div>
<div class="col-lg-6 col-md-6 col-12 child2">
Child content 2<br>
Child content 2<br>
Child content 2<br>
Child content 2<br>
Child content 2<br>
</div>
</div>
UPDATE
一些CSS:
.col-lg-12{
top:40px;
bottom:0px;
border:4px solid green;
}
.child1a, .child1b{
border:4px solid black;
display:inline-block !important;
}
.child1{
border:4px solid blue;
height:300px;
display:table-cell !important;
vertical-align:middle;
}
.child2{
border:4px solid red;
}
当附加input-group到a时form-inline,在input-group"新行"上显示在表单下方而不是与其他控件内联.
看起来这是因为input-group包装器类display设置为table而其他输入正常工作,其display设置为inline-block.当然,这是不可能给予input-group的inline-block显示器,因为它的子add-on跨度,其中有display: table-cell,需要父母的财产,以正确对齐.
所以我的问题是:是否可以使用Bootstrap类专门input-group在内联表单中使用？如果没有,那么允许使用自定义类的最佳解决方法是什么.
这是一个说明我的观点的演示.代码如下:
<form action="" class="form-inline">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
<input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/>
<div class="checkbox">
<label>
<input type="checkbox" /> and Checkboxes
</label>
</div>
<select class="form-control" style="width: 150px;">
<option>and Selects</option>
</select>
<button type="submit" class="btn btn-default">and Buttons</button>
<div class="input-group" …有没有人使用过Foundation 4或Bootstrap 3 beta？如您所知,两者都经过重新编写,首先使其成为移动设备.
我对移动第一种方法感到非常兴奋,但在现实生活中,有时情况不会让我们做我们认为正确的方式.
所以我只是想问,有没有人使用F4或BS3进行非移动优先(甚至是非响应)项目？我没有真正深入研究代码,文档也很缺乏.
我的意思是,在F4/BS3中是否存在一些隐藏的警告,如果我将其中一个用于非移动的第一/响应项目,那么它不会像两个框架都是移动的第一个框架一样顺利工作吗？或者,您是否建议将Foundation 3.5或Bootstrap 2.3用于非移动优先项目？
谢谢,希望我足够清楚.
我们正在尝试从Bootstrap 2.3.2迁移到Bootstrap 3(RC1),并且遇到AngularJS Dialog指令的问题.单击相关按钮时,不会出现对话框弹出窗口(页面显示为黑色.单击任意位置返回到原始的非黑色视图).
我们基本上使用与上述链接完全相同的代码.
有讨论的一个已知的问题在这里.在那次讨论中,路德建议:
"要使模态工作,添加隐藏类以将display:none设置为modal并将模态的显示重置为block"
不幸的是,这似乎没有任何区别.我们可以使用哪些替代方法来使对话框出现在Bootstrap 3 RC1中？
我尝试过使用Modal指令.它有一个类似的问题,页面淡出(而不是完全黑色),弹出窗口也没有出现.
twitter-bootstrap angularjs angularjs-directive twitter-bootstrap-3
我的印象是没有固定的网格系统和新的Twitter Bootstrap 3.我在做出这个假设时是否正确？我搜索了文档,但我找到的只是响应的新网格系统.我目前正在处理的项目不要求网站做出响应.这里可能有一个简单的解决方案.
我正在尝试使用LESS文件使用Twitter Bootstrap 3设置Play框架2.1.1.
我已经把bootstrap LESS文件放入了app\assets\stylesheets\bootstrap.
我更新了我的项目配置(Build.scala),以便只编译主bootstrap.less文件(导入其他文件):
val main = play.Project(appName, appVersion, appDependencies).settings(
lessEntryPoints <<= baseDirectory(customLessEntryPoints),
javascriptEntryPoints <<= baseDirectory(customJavascriptEntryPoints)
)
def customLessEntryPoints(base: File): PathFinder = (
(base / "app" / "assets" / "stylesheets" / "bootstrap" / "bootstrap.less") +++
(base / "app" / "assets" / "stylesheets" / "*.less")
)
def customJavascriptEntryPoints(base: File): PathFinder = (
(base / "app" / "assets" / "javascripts" * "*.js")
)
我无法编译Bootstrap,我得到以下内容:
Expected )
In ...\app\assets\stylesheets\bootstrap\mixins.less at line 0.
这个问题似乎来自于用分号分隔的mixin参数.当我用逗号替换这些分号时,它可以正常工作.
Play LESS编译器是否需要逗号？我是否需要用逗号替换每个分号,还是可以配置Play …
less twitter-bootstrap playframework-2.1 twitter-bootstrap-3
我有一个奇怪而奇怪的问题.问题是一个小问题,我想将min-height设置为100%,即页面内容应该跨越用户的整个屏幕,如果可能,页面应该在内容超过100%时向下延伸.一个简单的方法是设置min-height:100%并设置height:auto这正是我想要的但是无论我多少次尝试它,问题仍然存在.
我使用高度自动和最小高度:所有元素100%,但它不起作用.如果我删除最小高度只包括高度:100%然后它就像一个魅力,但是当内容较大时它会溢出整个页脚.
请帮帮我这里是css:
html, body, container, row, col-lg-3, col-lg-9 {
min-height: 100%;
height: auto !important;
height: 100%;
}
.container {
max-width: 1170px;
min-height: 100%;
height: auto !important;
height: 100%;
}
.col-lg-3 {
min-height:100%;
height:100%;
}
.col-lg-9 {
min-height: 100%;
height: 100%;
}
以下是显示问题的页面:http: //contestlancer.com/ai/GP/
所以,我试图集中我的导航栏列表项目.由于此任务没有实用程序功能,因此我设计了以下代码,将无序列表放在行中的列中.但即使我尝试使用旧的'text-align:center'进行居中,这个列表仍然在左边是合理的
<div class="navbar navbar-fixed-top ">
<!--<a class="navbar-brand" href="#">Title</a> -->
<div class= "row">
<div style="border:1px solid black;text-align:center;" class="col-4 col-offset-4">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
我正在将一个应用程序转换为Bootstrap 3.这是我的样本轮播页面的代码.是的,我在加载Bootstrap.js之前加载了jQuery.无论出于何种原因,旋转木马根本不起作用.具体来说:上一个/下一个按钮不起作用,并且轮播不会自动滑动到下一张幻灯片.
测试:
...在Mac OS X 10.8.4上
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lt IE 9]>
<script src="" alt-src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-glyphicons.css" type="text/css">
<title>Carousel Test</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script>
// Added this just so I didn't have to wait 5 seconds to see if the transition worked. //
$(document).ready(function() {
$('#Carousel').carousel({
interval: 1000
}); …阅读新的(未完成)后引导3文档我想知道如何创建语义网格移动.
简而言之.如何转换这个:
<div class="row">
<div class="col col-lg-6 col-sm-6">6</div>
<div class="col col-lg-6 col-sm-6">6</div>
</div>
为此并保留小型移动网格:
<div class="wrapper">
<div class="left">6</div>
<div class="right">6</div>
</div>
减
.wrapper { .make-row(); }
.left { .make-column(6); // this creates only large grid }
.right { .make-column(6); }