我有一个正在使用 Bootstrap 4 开发的网站。从移动设备查看并且菜单项已折叠到 3 个栏时，菜单项不可点击。我已经尝试按照引导程序文档建议的方式实现它，但它仍然无法正常工作。我尝试了一些其他调整无济于事。
我在这里做错了什么（除了使用 alpha 版本）？
这是您可以测试它的站点：http : //www.wrestlestat.com
请记住，如果您只是将浏览器从桌面大小调整为移动大小，则一切正常，只有在从移动设备查看时才不起作用。
这是导航菜单的代码：
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsemenus">
?
</button>
<a href="/" class="navbar-brand">
<img alt="WrestleStat" src="/images/WrestleStat.png" height="35" asp-append-version="true" />
</a>
</div>
<div id="collapsemenus" class="collapse navbar-toggleable-xs">
<ul class="nav navbar-nav">
<li class="nav-item m-l-1 hidden-xs-down">
<a class="nav-link donate" type="button">Donate</a>
</li>
<li class="nav-item hidden-sm-up">
<a class="nav-link donate" type="button">Donate</a>
</li>
<li class="nav-item">
<a href="/team/select" class="nav-link" type="button">Teams</a>
</li>
<li class="nav-item btn-group">
<a class="dropdown-toggle …css jquery twitter-bootstrap twitter-bootstrap-4 bootstrap-4
我无法使用Typescript切换bootstrap模式.我正在使用默认的bootstrap 4 Modal.这是代码.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
这是一个Bootstrap 4提供的按钮来切换模态
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
我没有在我的应用程序中使用此按钮.我想通过我的一个Angular 2组件中的函数来显示Modal.我使用以下代码访问了html元素.
ngOnInit() {
this.modalElement = document.getElementById('myModal');
}
现在我需要激活模态以使用方法调用来显示它.我不打算找到解决办法.我尝试了像.show()和其他解决方案这样的方法,但都没有.
根据我的 psd 模板，我有一个由 5 个等宽 (344px) 列组成的 CONTAINER。我决定在响应能力方面使用引导程序。但现在我对这项任务感到沮丧。
有什么方法可以实现这个或者我需要：
代码笔：http ://codepen.io/anon/pen/YZbBQG
<div class="cont">
<div class="bicycles">
<div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
<div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
<div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
<div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
<div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
</div>
</div>
css flexbox twitter-bootstrap twitter-bootstrap-4 bootstrap-4
我正在尝试使用card-columnsBootstrap 4 中的类来创建动态页面，这些页面有时可能包含两个到多达 8 个不同的卡片。
现在，我的问题很简单：我试图在justify-content-around卡片上使用类之类的东西，这样，如果只有两张卡片，它们就会在彼此相邻的页面上居中。现在他们留在左边，他们不会从左边移动。
我只是在页面上并排地寻找两张卡片。
<div class="container">
<div class="card-columns">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with shorter text.</p>
</div>
</div>
</div>
</div>
非常感谢帮助。
Does anyone know if this kind of thing is possible?
I've tried using inline-group and form-inline but then it doesn't seem to conform to fit the full grid width.
Whereas form-horizontal seems to expect the entire form on one row.
This code creates the desired output (two form controls on one row) but form-groups are required around each one for viewing in sm mode.
NB: This is for a 16 col grid.
<form>
<div className="form-group row">
<!--form group needed here …我想更改left/rightBootstrap 4 中列的填充 ( )。
例如
col-md-4 （似乎是15px左右填充），我想把这个说得更小10px
我已经看过了，_variables.scss但什么也看不到，看起来它可能会这样做。
我正在使用 bootstrap 4.0.0 中的模板，我将用于包含许多（50+）混合比例图像的多个图库页面。我有一个网格布局，除了 IE11 之外都运行良好。我的图像位于按钮内的卡片内，卡片高度似乎延伸到响应图像的最大高度。
我自动添加了前缀，并使用了这个 flexbox 错误页面上的选项，但没有成功。
我试图将代码包含在代码段中，但它不起作用，所以我只想提供这个指向 bootply 的链接：
显示列高度太高的 IE11 问题的屏幕截图：链接
显示网格在其他浏览器中的外观的图像链接
除了 IE11 占 10% 的访问者之外，一切都适用于所有现代浏览器、屏幕尺寸和设备。（我不担心任何不支持引导程序 4.0 的旧版本，例如 ie9 或 safari 8）
我正在寻找使用Fontawesome和Bootstrap 4的Navbar组件的示例,以便我有一个文本描述和一个彼此相邻的图标.
我试图以这种方式使用bootstrap 4徽章:
<td><span class="badge badge-warning">{{ object.get_type_display }}</span></td>
我正在使用:
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css
可能是什么原因？
我正在尝试在Bootstrap 4 Alpha 6中创建一个垂直方向的旋转木马.我仍然无法弄清楚为什么Bootstrap的人不包括这个方向,但我接近我的解决方案拥有.我似乎在我的CSS中遗漏了一些东西,但似乎无法放置它.
在JSFIDDLE上查看我的演示
我的问题是旋转木马滑梯的非向上流体运动.幻灯片从底部上升,但在结束时不再继续 - 相反消失.
我正在构建这个代码来编译使用BS3执行此操作的旧方法,并尝试尽可能地匹配新的CSS类.这是我的代码,任何帮助解决这个谜团将非常感激.
HTML
<!-- Bootstrap Carousel -->
<div id="testCarousel" class="carousel slide vertical" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#testCarousel" data-slide-to="0" class="active"></li>
<li data-target="#testCarousel" data-slide-to="1"></li>
<li data-target="#testCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="//placehold.it/2500x750" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="//placehold.it/2500x750" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="//placehold.it/2500x750" alt="Third slide">
</div>
</div>
</div>
CSS
/* Just for Example Purposes */
body {
background: #333
} …css twitter-bootstrap twitter-bootstrap-4 bootstrap-carousel bootstrap-4