标签: twitter-bootstrap-4
为什么我的一些CSS规则不起作用？
我有一个嵌套的flexbox布局(使用bootstrap v4),它根据横向/纵向模式改变方向.第一级div(由flexbox使用order属性放置)#no,包含5个用作按钮的图标.该order属性不能像我期望的那样在这些图标上工作.
如果我不使用order属性,图标按自然顺序排列; 但是,如果我尝试使用该order属性进行布局,则不起作用.在代码中,info-div(order:3)应该是最后一个元素.事实并非如此.我可以通过改变源中的顺序来获得我想要的订单; 但是,我想澄清一下我的误解.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portrait of New York</title>
<style>
html, body {
width:100%;
height:100%;
}
#container {
height: 100%; width:100%;
display: flex; display: -webkit-flex;
flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
justify-content: center; -webkit-justify-content: center;
align-items: center; -webkit-align-items: center;
align-content: space-between; -webkit-align-content: space-between;
} …推荐指数
解决办法
查看次数
带有 HTML5 部分和旁边的 Bootstrap 网格
我正在使用Bootstrap 4 网格系统，并希望在屏幕的右侧浮动一旁。
目前我的主要内容被包裹在col-xl-3 中，我希望ASIDE也使用col-xl-3，但我希望它运行页面的高度，而不仅仅是它所在行的高度，如它目前正在将行的高度推出......
正如你从图片中看到的，我的一边是把顶行推得比底行高……
我在代码方面所做的一切就是这样；
section.body article, section.body aside { float: left; clear: both; }
任何帮助将不胜感激。
推荐指数
解决办法
查看次数
Bootstrap：突出显示修改后的输入文本？
是否有内置方式（或插件）突出显示input已修改的元素？只要输入没有其原始值，输入就会以某种方式突出显示（例如橙色边框）。可以使用 JavaScript 将所有输入标记为“未修改”（例如，通过我的“保存更改”按钮调用）。
推荐指数
解决办法
查看次数
按钮组太长时间不包装
我有一个很长的按钮组:https://jsfiddle.net/cyu4bvak/
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" />ABCDEFGHIJKLMNOPQRSTUVWXYZ
</label>
<label class="btn btn-primary active">
<input type="checkbox" />ABCDEFGHIJKLMNOPQRSTUVWXYZ
</label>
<label class="btn btn-primary active">
<input type="checkbox" />ABCDEFGHIJKLMNOPQRSTUVWXYZ
</label>
...
</div>
无论视口的大小如何,它总是需要一条长行来导致滚动.
是否有可能使其包裹,以便在较小的视口上它将包裹更多的线而不会导致滚动？
如果没有哪个替代方案我必须获得预期的行为？
css buttongroup responsive-design twitter-bootstrap twitter-bootstrap-4
推荐指数
解决办法
查看次数
无法在 Bootstrap 行中居中某些文本
我试图将一些文本连续居中。我觉得这不应该这么困难，我对为什么它不起作用感到困惑。
图片（示例）
#title_img {
background-image: url(http://cdn.playbuzz.com/cdn/UserImages/4343091c-c906-457b-b885-77675c22c92f.jpg);
height: 180px;
width: 180px;
margin: 0 auto;
}
#title_img_holder {
padding-top: 5%;
float: none;
margin: 0 auto;
}
#title_holder {
text-align: center;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" id="header_con">
<div class="container">
<div class="row" id="title_img_holder"> <img src="http://cdn.playbuzz.com/cdn/UserImages/4343091c-c906-457b-b885-77675c22c92f.jpg" class="mx-auto" alt="Smiley face" height="180" width="180"> </div>
<div class="row" id="title_holder">
<h2 class="text-center">We fix screens.
<small class="text-muted">Not for free though</small>
</h2>
</div>
</div>
</div>我使用的是最新版本的 boostrap 4
推荐指数
解决办法
查看次数
挂钩引导4个模态显示/隐藏来自Typescript的事件
有一个带有id的模态myModal我试图在它显示和关闭时挂钩事件.根据https://v4-alpha.getbootstrap.com/components/modal/#events的文档,我已将以下内容添加到我的模态组件中:
this.modalElement = document.getElementById("myModal");
this.modalElement.addEventListener("hidden.bs.modal", this.onModalHidden);
this.modalElement.addEventListener("shown.bs.modal", this.onModalShown);
现在的事件处理程序只会调试console.log"显示"或"隐藏"以进行测试,但不幸的是我无法让它工作:
private onModalShown = (event) => {
console.log("modal is shown!!!");
}
有什么东西缺失,有可能实现吗？
推荐指数
解决办法
查看次数
Bootstrap 4.0 - 使用弹性列
您好，您能帮我在代码中设置列吗？我有这个代码：
<div class="container-fluid h-100">
<div class="row h-100">
<div class="flex-column h-100">side menu</div>
<div class="???">
<div>1 piece</div>
<div>2 pieces piece</div>
<div>1 piece</div>
<div/>
<div/>
<div/>
这是我的实际结果，其中我画出了如何分割其余空间。带菜单的蓝色栏应该固定，实际做什么。列的比例为 1:2:1 可调。
css flexbox twitter-bootstrap twitter-bootstrap-4 bootstrap-4
推荐指数
解决办法
查看次数
Bootstrap 4 .table-responsive 类不会占用 100% 的宽度
我得到了 2 个具有相同 HTML 的表，并且都声明为：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<div class="card">
<div class="card-body">
<table class="table table-sm table-hover table-responsive">
<thead>
<tr>
<th>Item 01</th>
<th>Item 02</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 01</td>
<td>Item 02</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>这就是我在屏幕上看到的：
第二和连续的表使用相同的HTML声明没有得到100％的宽度thead和tbody...这里有什么不对？
更新：
由于最后一行的内容，我的第一个表正在工作，它足够长以使其 100% 适合我的卡片 div。
实际上 这是 Bootstrap 4 上的一个问题，所以这个问题上的 -2 声誉是无效的。谢谢。
推荐指数
解决办法
查看次数
Bootstrap 4导航药不起作用
<!-- Bootstrap pills -->
<ul class="nav nav-pills">
<li class="active">
<a data-toggle="pill" href="driver-details-tab">Driver Details</a>
</li>
<li>
<a data-toggle="pill" href="#erer">Register Driver</a>
</li>
</ul>
<div class="tab-content">
<div class="container-fluid drivers-main tab-pane active" id="driver-details-tab" role="tabpanel">
<div class="tab-pane" id="register-driver-tab" role="tabpanel">
asdsdd
</div>
<div class="container-fluid drivers-main tab-pane active" id="erer" role="tabpanel">
<div class="tab-pane" id="register-driver-tab" role="tabpanel">
ffffffffffffffffffffffffffff
</div>
</div>您好，我在引导程序中使用了nav-pills，但由于某些原因它无法正常工作，请看一下上面的代码，我没有在上面的小提琴中包含引导程序
推荐指数
解决办法
查看次数
Bootstrap 4：仅一列的最小宽度
我已经使用 Bootstrap 4 创建了一个基本的基于网格的布局。
我有两列：左和右。左列是 a div.col-12.col-md-5，右列是div.col-12.col-md-7。事情是，左列里面有一个表格，因为表格不是可以调整大小的，所以我希望左列的最小宽度为 460px（所以表格中的数据总是可以正确看到）。但我确实希望右侧的另一列能够完全响应并不断调整大小（直到屏幕大小 < md 断点 -768px-）。
我的布局看起来像这样：
为了尝试实现这种行为，我创建了这段 css：
@media (min-width: 768px) {
.min-width-460-md {
min-width: 460px;
}
}
我已经将 .min-width-460-md 类应用于左列。所以我的 html 代码看起来像下一个：
<section class="container-fluid">
<div class="row">
<div class="col-12 col-md-5 min-width-460-md">
First column (left) which contains a table and needs to be min-width 460px.
</div>
<div class="col-12 col-md-7">
Second column (it contains more resizable data, so no min-width required here).
</div>
</div>
</section>
问题是，将这个新类应用于左列，当它达到 460px 时，它会停止调整大小（如我所愿），但右列位于左列下方，如下所示：
我显然不希望这种情况发生。我真正想要的是，当左列达到 460px 时，它会停止调整大小，但右列会继续调整大小，直到屏幕小于 768px …
推荐指数
解决办法
查看次数