Tag: twitter bootstrap

如何在bootstrap中使用垂直alignment: 简单的问题：如何使用引导程序在col中垂直alignmentcol？这里的例子（我想垂直alignmentchild1a和child1b）： http://bootply.com/73666 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{ […]

如何为引导标签内容提供边框: 我正在使用引导标签，它完美的作品。我试图找出是否有一种方法来使用引导程序来给边界的连接到药片的边界的标签的内容，所以它会看起来像一个盒子。我试着用我自己的css做这个，但是tab tab边框和tab内容边框之间有一个帽子，这个tab tab需要有一个边距，不能被删除。我希望它看起来像下面的图像。

button上的Twitter Bootstrap onclick事件: 我有一个Twitter Bootstrapbutton收音机，并挂钩onclick事件。但是，如何检查哪个button被触发？我的第一个想法是简单地检查“活动”类，但是这应该创build一个竞赛条件（结果取决于Twitter Bootstrap事件或我自己的onclick事件是否首先被处理）。

调整和图像大小，以适应div（引导）: 我试图让图像适应特定大小的div。不幸的是，图像不符合它，而是相应地缩小到一个不够大的尺寸。我不确定最好的方法是让图像适合它。如果这不是足够的代码，我很乐意提供更多，我可以修复任何我忽略的错误。这是HTML <div class="span3 top1"> <div class="row"> <div class="span3 food1"> <img src="images/food1.jpg" alt=""> </div> </div> <div class="row"> <div class="span3 name1"> heres the name </div> </div> <div class="row"> <div class="span3 description1"> heres where i describe and say "read more" </div> </div> </div> 我的CSS .top1{ height:390px; background-color:#FFFFFF; margin-top:10px; } .food1{ background-color:#000000; height:230px; } .name1{ […]

TypeError：$（…）.modal不是具有引导模式的函数: 我有一个引导2.32模式，我试图dynamic插入到另一个视图的HTML。我正在与Codeigniter 2.1合作。以下dynamic插入引导模态部分视图到视图中，我有： <div id="modal_target"></div> 作为插入的目标div。我在我的视图中有一个button，如下所示： <a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a> 我的JS有： $.ajax({ type : 'POST', url : "AjaxUpdate/get_modal", cache : false, success : function(data){ if(data){ $('#modal_target').html(data); //This shows the modal $('#form-content').modal(); } } }); 主视图的button是： <div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div> 这是我想分开存储的部分视图： <div id="form-content" class="modal hide […]

dynamic地将一个类添加到Bootstrap的“popover”容器: 我彻底search了StackOverflow和Google，但都是空的。所以，如果这已被问及已经解决，所以提前道歉。注：我是jQuery的新手，所以我不知道如何写这个自己。我敢肯定，这是一个简单的代码片段，但不能把我的头围绕它。我正在做的是使用一个data-元素（例如： data-class或类似的）来附加一个新的类（或ID，我不挑剔了！）到顶层popover <div> 。我现在的代码如下： jQuery的： $('a[rel=popover]') .popover({ placement : 'bottom', trigger : 'hover' }) .click(function(e) { e.preventDefault() }); HTML： <a href="" rel="popover" data-class="dynamic-class" title="Title goes here" data-content="Content goes here"> 理想情况下，我会吐出的HTML是这样的： <div class="popover … dynamic-class"> <!– remainder of the popover code as per usual –> </div> 这是我能做的吗？在bootstrap站点上的文档是有点稀疏，所以它是需要我一段时间才刚刚到达这一点，不幸的是:( 提前感谢任何及所有的答复！

以使用Twitter Bootstrap创build的模式显示Google地图: 我正在尝试使用Twitter Bootstrap将Google地图插入模式。模态显示出现地图的形状，但只显示地图的一部分，其余显示为灰色。在调整屏幕大小后，地图始终显示正确，尽pipe居中放置在错误的地方。我search了一些build议，例如调用地图的resize事件，或者将地图图片的最大宽度设置为none，但是迄今为止这些build议都没有帮助。看起来地图只是在一个隐藏的元素中，没有find正确的大小。 JS function initialize() { var mapOptions = { center: new google.maps.LatLng(51.219987, 4.396237), zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(51.219987, 4.396237) }); marker.setMap(map); } HTML <div class="modal hide fade" id="myModal"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3></h3> </div> […]

网格系统下推和偏移有什么区别？: 我试图了解Bootstrap网格中push和offset的区别。例如，下面两行之间的唯一区别是每行中的第三列。一个使用推，另一个使用偏移量。但是，他们都完全一样。 <div class="row"> <div class="col-md-2"> <h2>Column 1</h2> <p> This is text for column 1 </p> <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p> </div> <div class="col-md-2"> <h2>Column 2</h2> <p>This is text for column 2</p> <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p> </div> <div class="col-md-2 col-md-push-6"> <h2>Column 3</h2> <p>This is text for column 3</p> <p><a class="btn […]

Twitter Bootstrap旋转木马不同高度的图像导致弹跳箭头: 我一直在使用Bootstrap的旋转木马类，到目前为止它已经很简单，但是我遇到的一个问题是，不同高度的图像会导致箭头上下反弹，以适应新的高度。这是我用于我的轮播的代码： <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img src="image_url_300height"/> <div class="carousel-caption"> <h4>…</h4> <p>…</p> </div> </div> <div class="item"> <img src="image_url_700height" /> </div> </div> <!– Carousel nav –> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> </div> 这个问题也在这个jsfiddle中说明过（不可否认，我试图解决这个问题的时候，在一个单独的问题上发现了这个问题！）我的问题是：我怎么能强制旋转木马保持在一个固定的高度（小提琴的第二个缩略图）和中心较小的图像，同时保持标题和箭头相对于旋转木马的静态位置？

如何获得Twitter Bootstrap Modal的调用者元素？: 我有一个调用模态a元素： <a class="btn" data-toggle="modal" data-target="#myModal" href="http://some-url" >Launch Modal</a> 而且，说这是我的模式： <div class="modal hide" id="myModal"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#" class="btn btn-primary">Save changes</a> </div> </div> 我可以将函数绑定到由模态引发的事件： $('#myModal').on('hidden', function () { // do something… }) 我的问题是：我怎样才能从我的事件订阅函数访问a元素，它调用了模式 –