我正在尝试实现投票系统，例如堆栈溢出，在将小屏幕上的箭头显示在与stackoverflow相同的行（文本附近的箭头）上时遇到问题。
在小屏幕上，它显示在2条不同的行中，如此screenshot中所示
这是我所做的
<div class="row">
<div class="col-md-2" style="font-size: 1em; color: #606060;">
<span class="fa fa-caret-up"></span>
<span>12</span>
<span class="fa fa-caret-down"></span>
</div>
<div class="col-md-10">
<h3>Column</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
<!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/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-1" style="font-size: 30px; color:#606060; text-align: center;">
<span class="fa fa-caret-up col-md-12"></span>
<span class="col-md-12">12</span>
<!-- Number goes here -->
<span class="fa fa-caret-down col-md-12"></span>
</div>
<div class="col-xs-11">
<h3>Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>最佳答案
您是否期望这样：
body{
margin:0;
padding:0;
}
.row{
margin:0 !important;
}
.voting{
width:120px;
font-size: 2em;
color: #606060;
display:flex;
flex-direction:column;
text-align:center;
}<script src="https://use.fontawesome.com/ecdc7512a9.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="row">
<div class="voting">
<span class="fa fa-caret-up"></span>
<span>12</span>
<span class="fa fa-caret-down"></span>
</div>
<div class="col-xl-8" style="width:calc(100% - 120px);">
<h3>Column</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>关于css - 在小屏幕上引导向下投票按钮对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57563496/