如何在较小的设备上停止破坏Bootstrap行

Question

我正在努力使网站响应。在标题部分，我正在使用Bootstrap Row。它在相对较大的显示器上运行良好，但是当我去更小的设备时，它会分成两行。下面是我的问题的代码和屏幕截图。

<div class="row">

    <div class="visible-xs col-xs-1"><span class="#w3-button #w3-teal #w3-xlarge mbtn" onclick="w3_open()">☰</span>   </div>

    <div class="visible-xs col-xs-5" style="margin-bottom:5px !important;"> 
       <img src="http://mycustomsite.tryfcomet.com/image/catalog/ranga_woods2.png" class="img-responsive" alt="RangaWoods" Title="RangaWoods">
    </div>  

    <div class="col-xs-6">
        <div id="top-links" class="nav pull-right hidden-lg hidden-md hidden-sm">
          <ul class="list-inline">
           <li><a href="<?php echo $wishlist; ?>" id="wishlist-total" title="<?php echo $text_wishlist; ?>"><i class="fa fa-heart-o"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_wishlist; ?></span></a></li>
            <li><a  href="<?php echo $shopping_cart; ?>" title="<?php echo $text_shopping_cart; ?>"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_shopping_cart; ?></span></a></li>
            <li class="dropdown"><a href="<?php echo $account; ?>" title="<?php echo $text_account; ?>" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_account; ?></span> <span class="caret"></span></a>
         </ul>
      </div>
   </div>
  </div> <!-- row-->

Answer 1

好的我解决了我的问题设置为col-xs-6 col-xs-5 col-xs-1 padding-left为零，默认为15px