Tag: twitter bootstrap

将图像与同一行上的文本左侧alignment – Twitter Bootstrap: 目前，我有一个段落标题和一个形象在右边，在同一行： <div class="paragraphs"> <div class="row"> <div class="span4"> <div class="content-heading"><h3>Experience &nbsp </h3><img src="../site/img/success32.png"/></div> <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> </div> </div> </div> 这工作正常 – 内容标题和图像是在同一行。但是，当我把图像放在content-heading div之前时，它们不再在同一行上。这是我想要实现的 – 图像然后内容标题 – 在同一行。

z-index与twitter引导下拉菜单的问题: 我在页面顶部的固定导航栏中使用twitter引导下拉菜单。这一切工作正常，但是有下拉菜单项显示在其他页面元素后面，而不是在他们面前的问题。如果我在页面上有任何position: relative （如jQuery UI手风琴，或谷歌图表），然后下拉菜单显示在它后面。尝试改变DD菜单和导航栏的z-index ，但没有任何区别。我可以让菜单坐在其他内容上方的唯一方法是将内容更改为position: fixed; OR z-index: -1; 但这两种解决scheme都会导致其他问题。感谢您能给我的任何帮助。我认为这可能是CSS定位的一些标准问题，我误解了，所以没有发布任何代码，但如果需要可以做。谢谢。

为什么我的Twitter Bootstrap表单字段溢出使用stream体容器？: 更新：这里的问题演示： http : //jsfiddle.net/fdB5Q/embedded/result/ 从大约767px到998px，表单域比包含的域宽。小于767px，整个表单区域转移到一个新的行。当浏览器窗口大约200px时呈现的页面完美显示。表单字段缩小，如你所期望的。对于视觉效果，请看这个非常相似的问题： Twitter Bootstrap CSS静态stream体表单定位这是头脑中的一切： <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" /> <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 这里是身体的一切： <div class="container-fluid"> <div class="row-fluid"> <div class="span8"> <p>Some Content.</p> </div> <div class="span4"> <div class="well"> <div class="control-group"> <label class="control-label" for="name">Your Name</label> <div class="controls"> <input type="text" class="input-xlarge" name="name" id="name" maxlength="100" /> </div> </div> […]

在引导程序中使用容器stream体会导致水平滚动条: 这是一个简单的例子： <div class="container-fluid"> <div class="row"> <div class="col-lg-12">DUMMY CONTENT</div> </div> </div> 在小提琴演示当我在浏览器中看到结果时，我得到一个水平滚动条。为什么发生这种情况？我究竟做错了什么？

如何保持一个checkbox和标签在Rails窗体中的同一行？: 我应该怎样做一个checkbox的标签在一个包含一个表单的轨道视图checkbox在同一行？目前标签在下一行： <div class="span6 offset3"> <%= form_for(@user) do |f| %> <%= render 'shared/error_messages', object: f.object %> <%= f.label :name %> <%= f.text_field :name %> <br> <%= f.check_box :terms_of_service %> <%= f.label :terms_of_service, "I agree to the #{link_to 'Terms of Service', policies_path}.".html_safe %> <br><br> <%= f.submit "Create my account", :class => "btn btn-large btn-primary" %> <% […]

如何打开特定的引导程序导航选项卡的标签点击一个particuler链接使用jQuery？: 我是jquery和bootstrap的新手，所以请考虑我的错误。我创build了一个用于login和注册的引导模式。它包含两个称为login和注册的导航选项卡。我有两个buttonpopup相同的模态窗口，但在模态窗口内显示不同的选项卡。在每个选项卡中是一个具有多个input的表单。我的问题是得到的模式popuplogin选项卡中打开的模式，当我点击“login”button和注册选项卡打开时，我点击我的网页上的“注册”button。这些是模式打开的2个链接： <div class="header-login-li" style="background-color:gray;float:left;width:100px;height:60px;"> <a data-toggle="modal" href="#regestration" class="header-register-a" > <big> <font color="white" class="header-register-font"><center style="margin-top:20px;">Login <i class="icon-chevron-down" style="font-size:20px"></i></center></font> </big></a></div> <div class="header-register-li" style="background-color:green;float:right;margin-right:-15px;width:130px;height:60px;"> <a data-toggle="modal" href="#regestration" class="header-register-a" > <big> <font color="white" class="header-register-font"><center style="margin-top:20px;">Register</center></font> </big></a> 这里是我的代码标签和他们的内容（我在这里避免不必要的代码）： <div class="tabbable" > <ul class="nav nav-tabs" ><!–tabs–> <li class="active" style="position:absolute;margin-left:0px;" id="logintab"> <a href="#pane_login" data-toggle="tab">Login</a></li> <li style="margin-left:70px;" id="reg_tab" ><a […]

Bootstrap 3可滚动div表格: 我在顶部使用了一个导航栏的Bootstrap 3，并使用Bootstrap 3的表格类来显示一个表格。我希望表（它坐在自己的div）是可滚动页面的唯一部分（当表中的数据的宽度/高度超过页面的宽度/高度时）。我已经为表格设置了div，如下所示： .mygrid-wrapper-div { overflow: scroll; height: 200px; } 我有一个小提琴来说明这一点，我在div周围添加了一个丑陋的5px红色边框来突出显示我想要滚动的区域： http://jsfiddle.net/4NB2N/4/ 请注意，从左向右滚动效果很好 – 我不必做任何事情就可以实现这个function，当窗口resize时，div自动调整滚动条。然而，我不知道如何设置div的高度行为相同的方式 – 我硬编码的200px值，但我真的希望div来填补窗口的“rest”，所以当浏览器resize，它仍然工作。我怎样才能使水平和垂直的行为相同？

如何在引导程序中使用css3中的响应式背景图像: 我不想使用HTML标记。这是我的CSS。我正在使用bootstrap 3.0。 background:url('images/ip-box.png')no-repeat; background-size:100%; height: 140px; display:block; padding:0 !important; margin:0; 在100％缩放这是好的。但是当我放大约180％时，图像会从上到下短，我想要一些CSS技巧。

Bootstrap 3 – 根据屏幕大小设置模态窗口的高度: 我正在尝试使用Bootstrap 3模式对话框创build一种响应式megamenu。我想将整个模式窗口的宽度和高度设置为视口的80％，同时将模态主体设置为最大高度，以便不在大视口上填充整个屏幕。我的HTML： <div class="modal fade"> <div class="modal-dialog modal-megamenu"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> <h4 class="modal-title">Modal Mega Menu Test</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> </div> </div> </div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn btn-primary">close</button> </div> </div> </div> 我的CSS： .modal-megamenu { width:80%; height:80%; […]

引导3 – 响应MP4video: 我试图find自举网站上的一个很好的解决scheme，但我还没有得到答案。我想我不能成为唯一一个为此而挣扎的人，但是我找不到任何帮助我的东西。我试图在我的网站上embedded一个mp4video。问题是，如果我使用iframe标签，我不能使用自动播放和循环。正因为如此，我想用video标签（或其他支持自动播放和循环的东西）解决它。之后，我试图让我的video响应一个对象标签，但是这不起作用。即使我把它放在我的代码中（向你展示），你可以在下面看到： <div align="center"> <object class="embed-responsive-item"> <video autoplay loop > <source src="file.mp4" /> </video> </object> </div> 我希望你们中的任何人都能帮我解决这个问题。