Twitter bootstrap 如何在较小的设备上停止断开引导行

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

<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-->

☰   

---

好的，我解决了将col-xs-6 col-xs-5 col-xs-1填充设置为零的问题，默认情况下为15px

尝试将

style={box size:'border box'}

添加到类后的父div中<代码>您是否在父组件上尝试了

？这将使所有内容都在父视图中，这也将纠正这种情况。请投赞成票并接受答案，因为它起作用了。