Question

我正在尝试实现投票系统，例如堆栈溢出，在将小屏幕上的箭头显示在与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>

Answer 1

对不起，在第一次发现时没有遇到问题。无论如何..这应该有所帮助

<div class="row"  style="display:table;">
      <span class="fa fa-caret-up col-md-12" style=""></span>
      <span class="col-md-12" style="">12</span>
      <!-- Number goes here -->
      <span class="fa fa-caret-down col-md-12" style=""></span>
      <div class="col-xs-11"  style="table-cell">
        <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>
        <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>
        <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>

https://jsfiddle.net/cpkgxd1y/1/

Answer 2

您是否期望这样：

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>

在小屏幕上引导向下投票按钮对齐

2 个答案: