Tag: twitter bootstrap 3
居中引导input字段
我是新来的。 特别是与自举。 我有这个代码： <div class="row"> <div class="col-lg-3"> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div><!– /input-group –> </div><!– /.col-lg-6 –> </div><!– /.row –> 我需要把这个input字段和button放在页面的中心…“margin-left：auto; margin-right：auto;” 没有工作…有人有一个想法？
如何在bootstrap中居中表单3
我怎样才能中心我的login表单？ 我正在使用引导列，但它不工作。 这是我的代码： <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-6"> <h2>Log in</h2> <div> <table> <tr> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> </tr> </table> </div> </div> </div> </div>
如何在自举3中包含glyphicons
我以前没有使用任何引导框架。 我想在我的页面上的bootstrap 3中包含一些glyphicons。 根据我的理解，他们应该包含在我已经添加到我的页面的bootstrap.css文件中。 当我看了bootstrap.css文件，但是我没有看到任何对它们的引用？ 虽然它的一个大文件，我可能错过了一些东西。 我注意到，当我打开从bootstrap 3下载的dist文件夹时，有一个单独的文件夹fonts包含名为的文件： glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff 看起来像这是glyphicons的地方，但我不知道如何将这些附加到我的网站？ 如何将glyphicons附加到我的页面？ 提前感谢您的帮助 下面的代码显示了附加的bootstrap.css文件： <!DOCTYPE html> <html> <head> <title>Bootstrap example</title> <meta name="viewport" content="width=divice-width, initial-scale=1.0"> <!– Bootstrap –> <link href="bootstrap.css" rel="stylesheet" media="screen"> </head> 这里是html代码的部分显示glyphicons应该是： <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li> <li><a href="#"><span class="glyphicon glyphicon-star"></span> Top Destinations</a></li> <li class="dropdown"> […]
Bootstrap 3。容器中的stream体添加不需要的填充
我想我的内容是stream动的，但是当使用Bootstrap的网格使用.container-fluid时，我仍然看到填充。 我怎样才能摆脱填充？ 我发现我没有使用.row填充，但我想添加列，并且只要我这样做，填充就回来了：O。 我希望能够使用全宽的列。 一个例子： <div class="container-fluid"> <div class="row"> <div class="col-sm-6"> <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> <div class="col-sm-6"> <p>Use this document as a way to quickly start any new project.<br> All you get is this […]
Bootstrap 3 .img响应的图像在FireFox中的fieldset内部没有响应
在Firefox（Win7和Win8testing版）中，使用下面的代码 – 当响应图像位于<fieldset>内时，它不再响应。 这意味着，随着我的表单调整为手机，图像不会相应缩小。 我可以很容易地“解决”这个问题，所以我不需要任何帮助。 但是，如果你知道一个方法来解决这个问题，将不胜感激。 除非您删除<fieldset>和<legend>否则下面代码中的响应图像将不会响应FireFox中的浏览器大小（至less在Win7和Win8上）。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fieldset Responsive Image Test</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> </head> <body> <div id='content' class='container'> <div class='row'> <div class='col-xs-10 col-xs-offset-1'> <form> <fieldset> <legend>I Am Legend</legend> <img class='img-responsive' src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg==" alt="img" /> </fieldset> </form> </div> </div> </div> </body> </html>
Bootstrap Popover – 如何在文本popup窗口中添加链接？
美好的一天。 我使用bootstrap 3 popover。 现在我想链接文本popvover。 码： <a href="#" role="button" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href="" title="test add link">link on content</a>" data-original-title="test title" > test link </a> 但是，当我开始在HTML中的代码我看到： <a href="#" role="button" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href=" "="">link on content</a> " data-original-title="test title" > test link 我知道在符号问题"但我不知道有链接添加链接… 请告诉我，如何将正确的代码？ PS：如果问题已经存在，请给我链接。
在Bootstrap 3中向工具提示添加换行符
我正在使用Bootstrap 3，并向我的div添加了一个工具提示。 我试过使用\ n和＆＃013; 创build新的线路。 Bootstrap会阻止我吗？ <div class="content show-tooltip" data-placement="top" data-original-title="1st line of text <br> 2nd line of text">
使用Bootstrap 3，jQuery和phonegap的移动应用程序，可以吗？
我试图找出是否有可能开发一个使用phonegap作为包装的移动应用程序，Bootstrap的UI和jQuery的function？ 我无法在互联网上find任何项目尝试这种组合。 Bootstrap 3自带移动优先技术。 jQuery可以提供所有的function，Phonegap将它们全部包装到应用程序中。 我的目标是创build一个移动应用程序。 任何经验或其他想法？
在Bootstrap 3中如何certificatenavbar-nav
我试图certificate一个navbar （使导航栏内容拉伸）在引导3.我已经添加了margin: 0 auto; max-width: 1000px; margin: 0 auto; max-width: 1000px; 到nav*类，并且还尝试将一个container元素作为父项添加到ul 。 作为最后一个检查，我做了这个答案中的build议，在navbar类中添加了navbar-justified navbar ，但是这导致所有东西在左边一起缩小而没有certificate整个导航栏的正确性。 做一个nav nav-justified ul确实是ul中心，但是它不保留navbar-nav类的样式，因为它不是ul的一部分，当屏幕小于768px时，它看起来并不好看。 我如何certificate一个Bootstrap 3 navbar ？ 编辑：对于那些有兴趣的更完整的答案，这里是我在生产中使用的一些代码： // Stylesheet .navbar-nav>li { float: none; } // Navbar <nav class="navbar navbar-default"> <ul class="nav nav-justified navbar-nav"> <li><a href="/">Home</a></li> <li><a href="group.html">Group</a></li> <li><a href="services.html">Services</a></li> <li><a href="positions.html">Positions</a></li> </ul> </nav> 这里是一个工作jsFiddle 。 您可能需要拉伸result框的大小才能正确显示。 如果你有兴趣集中实际列表，而不需要导航到全宽，请参阅David Taiaroa的jsFiddle […]
不规则的引导列包装
使用最新版本的haml，haml-rails，sass和bootstrap-sass运行Rails 4.1.4。 对于用户显示器，我的HAML是这样的： .tutors-listing .row – @users.each do |tutor| .col-xs-12.col-md-3 .row.tutor .col-xs-offset-1.col-xs-4.col-md-12 = image_tag tutor.photo, :class => 'img-responsive img-circle tutor-photo' %h4.tutor-name = tutor.first_name %p teaches %strong.tutor-skills = tutor.teachables 但是，这个标记导致以下故障： 我希望没有人能在这里发现什么是错的。 在中等断点处，应该有4列均匀。
