CSS：Bootstrap Mobile对齐行上的两列

Question

当我在移动设备上查看时，有人可以告诉我如何在同一行上对齐两列。现在是这样的：

我希望它是箭头，旁边是HOME / DESIGN。如果我把它放在一个列div中，那么我不能将HOME/DESIGN居中，因为边距不起作用。

<div class="content-fluid">
  <div class="row back-box">
     <div class="col-sx-1 col-md-1">
       <div class="arrow-icon"></div>
     </div>
     <div class="col-sx-4 col-md-4" style="padding-top: 1px">
       <p><a href="http://localhost/artbox88-com"> HOME</a> / <span>DESIGN</span> </p>
     </div>
  </div>
</div>

CSS

    .arrow-icon
    {
     height: 25px;
     width: 25px;
     background-size: contain;
     background-image:url('../images/back.png');
     background-repeat: no-repeat;
     display: inline-block;
     }

    .arrow-icon:hover
    {
     background-size: 25px;
     background-image:url('../images/back_hover.png');
    }

    .back-box
    {
     padding: 50px 0px 0px 25px;
     position: absolute;
     width: 400px;
    }

    .back-box p
    {
      color: #474747;
      display: inline;
      font-family: "FuturaDemiC";
      font-size: 12px;
     }

    .back-box p a:hover
    {
     color: #858585;
     text-decoration: none;
    }

    .back-box span
    {
     color: #858585;
     }

Answer 1

你写了一个错字：

col-sx应为col-xs。