小编Web*_*ter的帖子
行中的块元素像 Bootstrap 4 中的内联块一样显示
当将块级元素（例如h1、p等）放置在 class="row" 的 div 中时，会导致它的行为类似于内联块元素！如果我删除“行”div，它会正确显示。我究竟做错了什么？
下面的示例代码导致标题和段落显示在同一行。我希望它们显示在不同的行上。
示例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<h1>Hello, world!</h1>
<p>This is a paragraph</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>0
推荐指数
推荐指数
1
解决办法
解决办法
2527
查看次数
查看次数
使用 Bootstrap 设计递增和递减数字
我正在尝试获取如下所示的用户界面，并且需要在数字下方有一个边框，如图所示：
但我使用下面所示的代码得到了不同的结果。有人可以帮我设计这个吗？
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.input-number{
margin: 0 15px;
width: 50px !important;
}
</style>
</head>
<body>
<div style="width:150px;padding:50px;">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</body>
</html>0
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
Bootstrap 4通过媒体查询删除元素的边距
我试图在使用移动屏幕时通过CSS中的媒体查询删除我在nav-link元素中添加的边距mt-2,但无法实现.我可能错误地调用了这个类.
请参见此处的示例>:
@media (max-width: 991px) {
.nav-link hovtext p-1 mt-2 a{
margin: 0;
}
} <div class=" col-xs-12 col-sm-8 col-md-4 d-flex clearfix">
<nav class="nav flex-column footerstyle">
<a class="nav-link hovtext p-1 mt-2" href="#">Términos de uso</a>
<a class="nav-link p-1" href="#">Políticas de privacidad</a>
<a class="nav-link p-1" href="#">Socios</a>
<a class="nav-link p-1" href="#">Confianza y Seguridad</a>
</nav>
</div>0
推荐指数
推荐指数
1
解决办法
解决办法
2995
查看次数
查看次数
Bootstrap 4 进度条中有 width 和 value-now 的原因是什么？
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%"
aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
第一个 div 是 HTML 的标准容器。第二个 div 的“进度条”来自 bootstrap。
但第二个将 style = "width":50% 和 "value-now"= 50 设置为相同的值。它们是如何连接的，为什么它们必须相同？
如果我删除所有其他 aria 属性并只保留 "style=width"=50% ，它仍然显示 50%。似乎其他属性 - aria-min、aria-max、value-now 无关紧要。
0
推荐指数
推荐指数
1
解决办法
解决办法
1580
查看次数
查看次数
无论屏幕大小如何，如何将徽标放置在其下方 div 的中间位置
我需要在下面的 div 中间放置一个标志，如下图所示，我似乎无法让它完美。无论屏幕大小或浏览器大小如何，即使在调整浏览器大小时也需要中途。
我正在使用这样的定位
.site-icon {
width: 15%;
top: 6%;
right: 11.9%;
}
该部分的 HTML
<div class="container-fluid page-container-2">
<h1 class="page-title-2 small-header">
<a href="/">SITE TITLE</a>
</h1>
<!-- This is the icon -->
<a href="/"><img class="site-icon" src="/resources/img/icon.png" alt="site_title"/></a>
<!-- this is the div holding the banner image -->
<div class="col-xs-12 banner-image-container-2 no-pad" style="background: url({% resource banner_image['path'] %}) no-repeat center center;background-size:cover;"></div>
.... rest of the page ....
但是当浏览器垂直或水平缩小时它会失败，我只是不知道如何用 css 来实现这一点？
-1
推荐指数
推荐指数
1
解决办法
解决办法
2827
查看次数
查看次数
Bootstrap 4传送带滑块不起作用
我在通过轮播进入下一张幻灯片时遇到了一些严重的问题。我可能缺少一些非常基本的内容，但是无论我做什么，它似乎都无法正常工作！我也尝试过使用Javascript，但无济于事。
<div id="mycarousel" class="carousel-slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active text-center p-4">
<h1 class="header-h1">WE'RE READY, ARE YOU? </h1>
<H2 class="header-h2">COME AND JOIN US FOR A SHOOT</H2>
<a href="/" class="btn btn-default">FIND OUT MORE</a>
</div>
<div class="carousel-item text-center p-4">
<h1 class="header-h1">COME AND </h1>
<H2 class="header-h2">HAVE</H2>
<a href="/" class="btn btn-default">A GO</a></p>
</div>
</div>
<a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
-1
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数