移动视图上的引导网格系统扭曲答案

【问题标题】：bootsrap grid system distort on mobile view移动视图上的引导网格系统扭曲
【发布时间】：2015-06-15 05:54:41
【问题描述】：

  <div class = "container">
    <div class="row">
        <div class="col-lg-6" >
           <div id="carousel"> <br><br><br>
          <!-- <div id="wrapper">-->
            <img src="<?php echo $pic1 ;?>" alt="c1" width="300" height="495"/>
            <img src="<?php echo $pic2 ;?>" alt="c2" width="300" height="500"  />
            <img src="<?php echo $pic3 ;?>" alt="c3" width="300" height="500" />
            </div>
        <div id="thumbnails">
            <img src="<?php echo $pic1 ;?>" alt="c1" width="100" height="100" />
            <img src="<?php echo $pic2 ;?>" alt="c2" width="100" height="100" />
            <img src="<?php echo $pic3 ;?>" alt="c3" width="100" height="100" />

        </div>
        </div>



      <div class="col-lg-6 text-right" >
     <div class="well">
        <div id="lt">
    <h2><?php echo $name ;?></h2>
    <h2>&#8377;.<?php echo $price;?></h2>
      <ul>
    <li><?php  echo strstr($screen, '<br>', true);?>cm</li>
    <li><?php echo $os; ?></li>
    <li><?php echo $mem; ?></li>
    <li><?php echo $sim; ?></li>
    <li><?php echo $pic3 ;?></li>
    </ul>
    <input type = "submit" class="btn btn-primary" value = "Add2Kart" id = "<?php echo $id; ?>">
   </div>
       </div>
        </div>
     </div>
      </div>

当我缩小浏览器以检查移动视图时，文本出现在滑块上方，我想要移动滑块下方的移动详细信息..如果我在桌面查看，我可以并排看到这些..但是文本在滑块上而不是在滑块下方.. 我将两列分开，但在移动视图上会变形。我希望每当页面加载时，它都会根据我已经使用过的设备自动进行调整。

distorted mobile view

Desktop view i want desktop view as it is

【问题讨论】：

尽可能分享屏幕截图！
请任何人，我的问题还没有解决

标签： jquery twitter-bootstrap jquery-mobile mobile

【解决方案1】：

这里你需要更新用于元素的引导类

col-lg-6 到 col-xs-6

还需要为两张图片添加 .img-responsive 类。这样这些图像将在移动设备级别调整大小，但不会分成两行。

【讨论】：

【解决方案2】：

将<div class="col-xs-6" > 用于移动设备等小型设备，并将<div class="col-md-6" > 用于平板电脑等中型设备并将<div class="col-lg-6" > 用于笔记本电脑和台式机等大型设备

并尝试概述http://getbootstrap.com/，它的引导程序官方网站，它有更多的解释

【讨论】：