小编Ret*_*ros的帖子
Bootstrap align-items-end 但没有列
我需要将 div 内的元素对齐到末尾。正如我从 Bootstrap 的文档中了解到的，我应该使用 d-flex 和 align-items-end。当我应用它时，它会将元素粘在底部，但它也会将它们分成几列。我不想要那样。
我需要做什么来修复它？
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="row">
<div class="col-5">
<div class="card">
<div class="card-body text-left d-flex align-items-end">
<a href="#" class="card-link">Link</a>
<a href="#" class="card-link">Link</a>
<h5 class="card-title">Title</h5>
<p class="card-text">Text goes here</p>
<a href="#" class="btn">Button</a>
<a href="#" class="btn">Button</a>
</div>
</div>
</div>
</div>2
推荐指数
推荐指数
1
解决办法
解决办法
3119
查看次数
查看次数
Bootstrap 4 全宽轮播显示其他幻灯片
我正在使用 Bootstrap 4 carousel 并尝试使其全宽。乍一看，它看起来像全宽，但是当您在更大的屏幕上查看它时，第一个滑块之后的其余滑块也会出现。只需尝试缩小窗口即可。
我怎样才能解决这个问题？
这是我的代码：
.first-slide {
background: url("https://image.ibb.co/kvhXGH/jetty_1373173_1920.jpg");
}
.carousel-item {
height: 800px;
width: 100%;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid p-0">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active first-slide">
<div class="row">
<div class="col-md-6 offset-md-1">
<h1>Title</h1>
<p>Text goes here</p>
</div>
<div class="col-md-5"></div>
</div>
</div>
<div class="carousel-item first-slide">
<div class="row">
<div class="col-md-6 offset-md-1">
<h1>Title</h1>
<p>Text goes here</p>
</div>
<div class="col-md-5"></div>
</div>
</div>
<div class="carousel-item first-slide">
<div class="row">
<div …2
推荐指数
推荐指数
1
解决办法
解决办法
3765
查看次数
查看次数
Bootstrap 4 Carousel 指标定位
我正在设计 Bootstrap 4 轮播，我需要轮播指示器进入左上角。但我还需要它们与上面的导航垂直对齐，这被包装在一个 Bootstrap 类 .container 中。
因为我知道我的解释很糟糕，所以这里有一张图片向您展示了我的意思：
如果我使用绝对位置，并添加 top: 0, left: 0 （或其他数字），则定位会根据屏幕大小移动，并且与导航不匹配。
这是我的代码大纲：
.carousel-indicators {
top: 10px;
left: 0;
right: auto;
}
.carousel-indicators li {
width: 20px;
height: 20px;
border-radius: 100%;
}
.carousel-indicators li:not(:last-child) {
margin-right: 20px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li> …2
推荐指数
推荐指数
1
解决办法
解决办法
7426
查看次数
查看次数
Bootstrap 4：垂直居中徽章，仅包含实用程序
我正在制作一张 Bootstrap 4 卡片，它的标题需要有一个图像、标题、副标题、徽章和一个关闭按钮。并且徽章需要在右侧垂直居中，而图像、标题和副标题需要在左侧垂直居中。
这是一张图片，它会更好地解释事情：
而且我无法获得标题和副标题，也无法获得垂直居中的徽章。我必须仅使用 Bootstrap 实用程序来执行此操作，因此如果可能的话，不需要额外的 CSS（或者如果没有其他选择，则很少）。我怎样才能做到这一点？
这是我的代码：
.close {
font-size: 20px;
text-shadow: none;
color: #000;
opacity: 1;
position: absolute;
right: 0;
top: 0;
}
.card-title {
font-size: 18px;
}
.card-subtitle {
font-size: 11px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="card">
<button type="button" class="close close-chat mr-1" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="card-header border-0 py-3">
<img src="http://placehold.it/45x45" class="rounded-circle float-left mr-3">
<h4 class="card-title mb-0 d-inline align-middle">Card title</h4>
<span class="badge badge-success float-right px-4 py-1 mt-2">Success</span>
<h6 class="card-subtitle text-muted">Card subtitle</h6> …1
推荐指数
推荐指数
1
解决办法
解决办法
2892
查看次数
查看次数
jQuery:隐藏div并在其位置显示另一个
我知道之前已经问过这个问题,但我发现的所有其他答案对我来说太复杂了.当您单击按钮时,我需要一个部分消失,另一个部分显示在其位置.
我怎么能用jQuery做到这一点？
这是我的代码的大纲:
<div class="container">
<div class="hide">
<button class="btn btn-block btn-primary rounded-0 mb-2">Button</button>
<button class="btn btn-block btn-primary rounded-0 btn-hide">Button</button>
</div>
<div class="show mt-3">
<form>
<div class="form-group mb-2">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<button class="btn btn-block btn-primary rounded-0">Button</button></div>
</form>
</div>
</div>我需要做什么CSS和jQuery才能使这个工作？那么第二部分(.show)恰好出现在第一部分的位置？
0
推荐指数
推荐指数
1
解决办法
解决办法
73
查看次数
查看次数