Questions tagged «bootstrap-4»

我正在使用Bootstrap 4 alpha 2并利用卡上的优势。具体来说，我正在使用从官方文档中获取的此示例。如何使所有卡的高度相同？ 我现在所能想到的就是设置以下CSS规则： .card { min-height: 200px; } 但这只是一个硬编码的解决方案，在一般情况下不起作用。我认为代码与文档中的代码相同，即： <div class="card-columns"> <div class="card"> <img class="card-img-top" data-src="..." alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title that wraps to a new line</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This …

134 html  css  twitter-bootstrap  bootstrap-4  bootstrap-cards 

在bootstrap-3中，有一个.well类可以在元素周围添加带有灰色背景色和填充的圆形边框。 <div class="well">Basic Well</div> 但是，我.well在bootstrap-4中没有找到任何类。是否有与.wellbootstrap-4中等效的标签？

129 css  twitter-bootstrap  twitter-bootstrap-3  bootstrap-4  twitter-bootstrap-4 

引导程序3的新手。...在我的布局中，我有： <div class="row"> <div class="col-lg-6 col-md-6">elements 1</div> <div class="col-lg-6 col-md-6"> <div class="pull-right"> elements 2 </div> </div> </div> 我希望“元素2”在比col-lg屏幕小的地方不对齐。如此有效地让类只向col-lg-6右上推... 我怎样才能做到这一点？ 这是一个小提琴：http : //jsfiddle.net/thibs/Y6WPz/ 谢谢

127 css  twitter-bootstrap  twitter-bootstrap-3  bootstrap-4 

我有一个引导网站，当屏幕尺寸小于992px时，会添加汉堡包切换器。代码如下： <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> 可以更改汉堡切换按钮的颜色吗？

124 css  twitter-bootstrap  bootstrap-4 

我正在通过在导航栏上放置一些文本作为标题来开发注册页面。我想给这些文本提供不同的颜色。为此，我使用了一个单独的CSS文件，但是我想使用bootstrap的CSS文件来完成此操作。 有人可以在引导程序中列出可用的颜色类别吗？

119 css  twitter-bootstrap  twitter-bootstrap-3  bootstrap-4 

关闭。此问题不符合堆栈溢出准则。它当前不接受答案。 想改善这个问题吗？更新问题，使其成为Stack Overflow 的主题。 2年前关闭。 改善这个问题 我在新网站上使用Bootstrap V4，发现它位于Alpha中。 但是我看不到它的版本中有datepicker.js。 有人知道这是否将包含在V4中吗？如果没有，谁能推荐一个好的日期选择器？

114 twitter-bootstrap  bootstrap-4 

我想用NuGet更新ASP.NET Core中的Bootstrap。我用这个： Install-Package bootstrap -Version 4.0.0 它确实添加了依赖关系，但是现在如何将其添加到我的项目中呢？本地NuGet依赖项的路径是什么？

111 .net  asp.net-core  nuget  bootstrap-4  asp.net-core-2.0 

我似乎无法获得下拉菜单项以不离开页面。我尝试了BS3的一些功能，但它们似乎不起作用。我不确定是否是因为ml-auto。（忽略if-else语句） 这是CodePen： <div class="container-fluid"> <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse" style="background-color: #3c763d!important;"> <button class="navbar-toggler navbar-toggler-right navbar-toggler-custom" type="button" data-toggle="collapse" data-target="#searchNav" aria-controls="searchav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span …

111 twitter-bootstrap  css  bootstrap-4 

这就是我试图通过Bootstrap 3轮播实现的效果 不仅可以一次显示一帧，还可以同时显示N帧幻灯片。然后，当您滑动（或自动滑动）时，它会像平移一样移动这组幻灯片。 可以使用bootstrap 3的轮播吗？我希望我不必再去寻找另一个jQuery插件...

110 jquery  twitter-bootstrap-3  jquery-plugins  carousel  bootstrap-4 

我已经使用Bootstrap 4创建了可折叠的导航栏，该导航栏效果很好，但是我希望在用户单击链接时将其关闭。有什么办法吗？谢谢 html导航栏： <nav class="navbar navbar-toggleable-md fixed-top"> <button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="container"> <a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a> <div class="collapse navbar-collapse" id="navbarDiv"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" …

108 html  css  twitter-bootstrap  bootstrap-4  twitter-bootstrap-4 

引导程序4是否具有内置的水平分隔器？我可以做这个， <style type="text/css"> .h-divider{ margin-top:5px; margin-bottom:5px; height:1px; width:100%; border-top:1px solid gray; } </style> 但是我想使用内置的Bootstrap CSS，我在文档的任何地方都找不到它，也许我错过了。

104 html  css  bootstrap-4  twitter-bootstrap-4 

在最新版本中，左上拉和右上拉已替换为.pull- {xs，sm，md，lg，xl}-{left，right，none} 这意味着class="pull-right"我现在不必写简单的东西了class="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right" 有没有那么乏味的方法呢？

103 bootstrap-4 

我刚刚访问了该页面http://www.elmastudio.de/，想知道是否可以使用Bootstrap 3构建左侧边栏折叠。 从顶部折叠边栏的代码（仅适用于电话）： <button type="button" class="navbar-toggle sidebar-toggle" data-toggle="collapse" data-target=".sidebar-ex1-collapse"> <span class="sr-only">Sidebar</span> <span class="glyphicon glyphicon-check"></span> </button> 补充工具栏本身具有hidden-xs类。使用以下js将其删除 $('.sidebar-toggle').click(function(){ $('#sidebar').removeClass('hidden-xs'); }); 如果单击该按钮，则会从顶部切换侧边栏。很高兴看到侧边栏的行为类似于上面显示的网站。任何帮助表示赞赏！

102 twitter-bootstrap-3  bootstrap-4  sidebar  collapse 

在中Bootstrap 3，我可以随意col-sm-xx将其应用于和调整大小表列中的th标签thead。但是，这在Bootstrap 4中不起作用。如何在Bootstrap 4中实现类似的功能？ <thead> <th class="col-sm-3">3 columns wide</th> <th class="col-sm-5">5 columns wide</th> <th class="col-sm-4">4 columns wide</th> </thead> 查看提供的编解码器大小不正确，特别是如果您向表中添加一些数据。查看运行方式： <div class="container" style="border: 1px solid black;"> <table class="table table-bordered"> <thead> <tr class="row"> <th class="col-sm-3">3 columns wide</th> <th class="col-sm-5">5 columns wide</th> <th class="col-sm-4">4 columns wide</th> </tr> </thead> <tbody> <tr> <td>123</td> <td>456</td> <td>789</td> …

102 css  twitter-bootstrap  html-table  bootstrap-4 

我希望我的内容流畅，但是当.container-fluid与Bootstrap的网格一起使用时，我仍然看到填充。我如何摆脱填充物？ 我看到我没有使用.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 …

98 twitter-bootstrap  twitter-bootstrap-3  bootstrap-4