Questions tagged «bootstrap-4»

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

711 css  twitter-bootstrap  twitter-bootstrap-3  bootstrap-4  navbar 

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

544 css  twitter-bootstrap  twitter-bootstrap-3  responsive-design  bootstrap-4 

我在这里有一个简单的演示： 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> 我有一个无序列表，对于每个列表项，我希望左侧有一个文本，然后有一个右对齐的按钮。我尝试使用向右拉，但这完全弄乱了对齐方式。我究竟做错了什么？

452 twitter-bootstrap  twitter-bootstrap-3  bootstrap-4  twitter-bootstrap-2 

在Bootstrap中，最简单的平台创建导航栏的方法是在左侧显示徽标A，在中央显示菜单项，在右侧显示徽标B。 这是到目前为止我尝试过的方法，最终将它们对齐，以使徽标A位于左侧，菜单项位于徽标旁边，左侧是徽标B。 <div class="navbar navbar-fixed-top navbar-custom "> <div class="container" > <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">Menu Item 1</a></li> <li><a href="#contact">Menu Item 2</a></li> <li><a href="#about">Menu Item 3</a></li> …

437 html  css  twitter-bootstrap  bootstrap-4  navbar 

我正在使用Bootstrap，但以下操作无效： <tbody> <a href="#"> <tr> <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td> </tr> </a> </tbody>

436 html  html-table  bootstrap-4 

我想在正在构建的页面上有5个相等的列，但我似乎无法理解此处如何使用5列网格： http //web.archive.org/web/20120416024539/http //domain7 .com / mobile / tools / bootstrap / response 在Twitter引导程序框架的上方是否演示了五列网格？

361 twitter-bootstrap  twitter-bootstrap-3  bootstrap-4 

如何将导航栏项目右对齐？ 我要登录并在右边注册。但是我尝试的所有方法似乎都无法正常工作。 到目前为止，这是我尝试过的： <div>周围<ul>带有属性：style="float: right" <div>周围<ul>带有属性：style="text-align: right" 在<li>标签上尝试了这两件事 再次尝试了所有这些事情，并!important添加到最后 改变nav-item以nav-right在<li> 添加了一个pull-sm-right类的<li> 添加了一个align-content-end类的<li> 这是我的代码： <div id="app" class="container"> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> …

340 css  twitter-bootstrap  flexbox  bootstrap-4  navbar 

我正在尝试使用Bootstrap 4将Container放在页面的中央。到目前为止，我一直没有成功。任何帮助，将不胜感激。 我已经在Codepen.io上构建了它，以便你们可以使用它，并让我知道什么出于我的想法而有效... 显示代码段 var currentAuthor = ""; var currentQuote = ""; function randomQuote() { $.ajax({ url: "https://api.forismatic.com/api/1.0/?", dataType: "jsonp", data: "method=getQuote&format=jsonp&lang=en&jsonp=?", success: function( response ) { $("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>'); $("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>'); currentAuthor …

322 html  css  twitter-bootstrap  flexbox  bootstrap-4 

我们有一个项目，大量使用字形图标。Bootstrap v4完全删除了glyphicon字体。 Bootstrap V4随附的图标是否等效？ http://v4-alpha.getbootstrap.com/migration/

317 bootstrap-4  glyphicons 

在Bootstrap v3中，我经常将hidden-**类与clearfix结合使用以控制不同屏幕宽度下的多列布局。例如， 我可以在一个DIV中合并多个hidden-**，以使我的多列在不同的屏幕宽度下正确显示。 例如，如果我要显示产品照片行，则在大屏幕上每行显示4张，在小屏幕上每行显示3张，然后在非常小的屏幕上每行显示2张。产品照片的高度可能不同，因此我需要使用clearfix来确保行正确地断开。 这是v3中的一个示例... http://jsbin.com/tosebayode/edit?html,css，输出 现在，v4取消了这些类，并用可见/隐藏**-上/下类替换了它们，我似乎不得不对多个DIV执行相同的操作。 这是v4中的类似示例... http://jsbin.com/sagowihowa/edit?html,css，输出 因此，我已经从单个DIV变为必须添加具有很多上/下类的多个DIV以实现相同的目的。 从... <div class="clearfix visible-xs-block visible-sm-block"></div> 至... <div class="clearfix hidden-sm-up"></div> <div class="clearfix hidden-md-up hidden-xs-down"></div> <div class="clearfix hidden-md-down"></div> 在我忽略的v4中，有没有更好的方法可以做到这一点？

289 twitter-bootstrap  bootstrap-4 

在bootstrap的div容器内，使某些文本左对齐和使其他文本右对齐的常见方法有哪些？ 例如 Total cost $42 以上总费用应为左对齐文本，$ 42为右对齐文本

268 twitter-bootstrap  user-interface  bootstrap-4 

我正在使用Bootstrap V4，控制台中记录了以下错误； 错误：Bootstrap工具提示需要系绳（http://github.hubspot.com/tether/） 我试图通过安装Tether来消除错误，但没有成功。我通过包含以下代码行来“安装” Tether； <link rel="stylesheet" href="http://www.atlasestateagents.co.uk/css/tether.min.css"> <script src="http://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> 我是否正确“安装”了系绳？ 谁能帮助我消除此错误？ 如果您想在我的网站上查看错误，请单击此处并加载控制台。

176 javascript  twitter-bootstrap  bootstrap-4  tether 

我有一个页面，其中仅存在表单，并且我希望将表单放置在屏幕的中央。 <div class="container"> <div class="row justify-content-center align-items-center"> <form> <div class="form-group"> <label for="formGroupExampleInput">Example label</label> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"> </div> <div class="form-group"> <label for="formGroupExampleInput2">Another label</label> <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"> </div> </form> </div> </div> 该justify-content-center对齐表格水平，但我无法弄清楚如何垂直对齐。我已经尝试使用align-items-center和align-self-center，但是它不起作用。 我想念什么？ 演示

162 css  twitter-bootstrap  bootstrap-4  centering 

我正在测试Bootstrap响应性导航栏，并且有一个演示网站。当我在桌面上调整浏览器的大小时，所有功能都可以正常使用，包括导航栏（可变为可折叠菜单），顶部带有一个小图标，单击该图标可以查看更多菜单按钮。 但是，当我通过移动浏览器进行尝试（我在chrome和Internet浏览器上进行了尝试）时，却没有看到响应式设计。我只能看到非常小的桌面版网站。 谁能指出我做错了什么？

139 twitter-bootstrap  user-interface  twitter-bootstrap-3  responsive-design  bootstrap-4 

在最新的机制的文档有： <p class="mb-0">Lorem ipsum</p> 运行代码段隐藏结果展开摘要 问：什么是mb-0？

138 css  twitter-bootstrap  bootstrap-4  twitter-bootstrap-4