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縮略圖在水平滾動

回答

相關問題