如何解决小屏设备上Bootstrap Row换行问题

嘿，我看你遇到了Bootstrap头部Row在小屏换行的问题，咱们来一步步排查解决它～

1. 先修正最明显的错误：Class选择器写法 #

你第一个div里的span标签，class属性里错误地加了#符号（这是ID选择器的标识，class名里不能用）：

<!-- 错误写法 -->
<span class="#w3-button #w3-teal #w3-xlarge mbtn" onclick="w3_open()">☰</span>

改成正确的类名写法，不然样式不生效会导致按钮宽度超出预期，挤爆布局：

<!-- 正确写法 -->
<span class="w3-button w3-teal w3-xlarge mbtn" onclick="w3_open()">☰</span>

2. 移除冗余的响应式类，避免冲突 #

你的前两个div同时用了visible-xs和col-xs-*，其实col-xs-*本身就会在小屏（xs）下显示，visible-xs是多余的，还可能和其他布局类冲突。建议直接去掉visible-xs：

<div class="col-xs-1">
  <span class="w3-button w3-teal w3-xlarge mbtn" onclick="w3_open()">☰</span>
</div>
<div class="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>

3. 调整浮动元素的布局，避免错位 #

第三个div里的#top-links用了pull-right浮动，在小屏的col-xs-6容器里，浮动可能导致元素宽度计算异常，引发换行。推荐把pull-right换成text-right（用文本对齐代替浮动，更适合小屏），同时确保容器占满宽度：

<div id="top-links" class="nav text-right hidden-lg hidden-md hidden-sm">

优化后的完整代码 #

<div class="row">
  <div class="col-xs-1">
    <span class="w3-button w3-teal w3-xlarge mbtn" onclick="w3_open()">☰</span>
  </div>
  <div class="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 text-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></li>
      </ul>
    </div>
  </div>
</div> <!-- row-->

最后给你个小技巧：打开浏览器开发者工具（按F12），切换到小屏模式，查看每个列元素的实际宽度、margin和padding，就能快速定位哪个元素超出了Row的100%宽度，这是排查Bootstrap布局问题的常用方法哦～

内容的提问来源于stack exchange，提问作者Mithu