Question

  <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

Answer 1

在这里，您需要更新用于

中元素的引导类

col-lg-6 来的 COL-XS-6

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

Answer 2

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

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

bootsrap网格系统在移动视图上扭曲

2 个答案: