bootstrap缩略图在水平滚动

嗨我想汤姆让自举缩略图适合在具有水平滚动的Div。我得到的问题是，它们正在崩溃，而不是像图像中看到的那样偏移。任何人都知道我可以解决这个问题？下面的代码是我正在使用的代码。bootstrap缩略图在水平滚动

<div class="container"> 
    <h1 style="color:white">Merchandise</h1> 
    <div style="overflow-x: scroll;width:100%;"> 
    <?php 
     while($row = mysqli_fetch_array($Merchval)) 
     { 
      echo '<div style="float:left;width:200px;display: block;"> 
        <div class="thumbnail " style="margin-right:5px;margin-left:5px;"> 
         <img src="assets/Merch/'.$row[1].''.$row[2].'" alt="'.$row[1].'"> 
         <div class="caption"> 
          <h3>'.$row[0].'</h3> 
          <h7>'.$row[3].'</h7> 
          <p>€'.$row[4].'</p> 
          <p><a href="#" class="btn btn-primary" role="button">Button</a> 
         </div> 
        </div> 
        </div>'; 
     } 
    ?> 
    </div> 
</div>

来源

2017-08-16 Nathaniel Scerri

其HTML版本有''？ –

摆脱PHP并包含HTML输出。这不是PHP的问题。 – miken32

我包括PHP的情况下，它是从代码 –

你的代码工作正常。必须有别的东西导致这个问题。你有一个为.container设置的CSS吗？

.container { 
 
    background: darkgray; 
 
}

<div class="container"> 
 
    <h1 style="color:white">Merchandise</h1> 
 
    <div style="overflow-x: scroll;width:100%;"> 
 
    
 
    <div style="float:left;width:200px; display: block;"> 
 
     <div class="thumbnail " style="margin-right:5px;margin-left:5px;"> 
 
     <img src="http://placehold.it/100" alt=""> 
 
     <div class="caption"> 
 
      <h3>Test</h3> 
 
      <h7>Test</h7> 
 
      <p>€200</p> 
 
      <p><a href="#" class="btn btn-primary" role="button">Button</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    <div style="float:left;width:200px; display: block;"> 
 
     <div class="thumbnail " style="margin-right:5px;margin-left:5px;"> 
 
     <img src="http://placehold.it/100" alt=""> 
 
     <div class="caption"> 
 
      <h3>Test</h3> 
 
      <h7>Test</h7> 
 
      <p>€200</p> 
 
      <p><a href="#" class="btn btn-primary" role="button">Button</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    
 
    </div> 
 
</div>

来源

2017-08-16 13:43:49 Gerard

该部分的问题嗨感谢您的答复，请参阅我已包含在问题中的图像，以便更好地了解我的问题是什么 –

终于得到它的工作，这是现在的代码：

<div class="container"> 
 
    <h1 style="color:white">Merchandise</h1> 
 
      <div style="overflow-x: scroll;width:100%; white-space: nowrap;"> 
 
           <?php 
 
    while($row = mysqli_fetch_array($Merchval)) { 
 
     echo '<div style="width:200px;display: inline-block; vertical-align: top;"><div class="thumbnail " style="margin-right:5px;margin-left:5px;"> 
 
          <img src="assets/Merch/'.$row[1].''.$row[2].'" alt="'.$row[1].'"> 
 
          <div class="caption"> 
 
          <h3>'.$row[0].'</h3> 
 
          <h7>'.$row[3].'</h7> 
 
          <p>€'.$row[4].'</p> 
 
          <p><a href="#" class="btn btn-primary" role="button">Button</a> 
 
          </div> 
 
         </div> </div>'; 
 
    } 
 
         ?> 
 
      </div> 
 
     </div>

来源

2017-08-16 22:50:44

bootstrap缩略图在水平滚动

回答

相关问题