引導問題與IMG響應和div標籤

Question

<div class="container-fluid text-center" style="background-color:#1a242f;"> 
    <div class="row"> 
     <div class="col-sm-2"> 
     </div> 
     <div class="imageheader col-sm-4"> 
      <a href="index.php">  
       <img class="img-responsive" src="images/logo & name.jpg"> 
      </a> 
     </div> 
     <div class="search col-sm-4" style="padding-left : 12%;"> 
      <ul class="list-group" style="background-color: #6ABED8;"> 
       <li> 
        <a href="careersatbvimit.php" style="color: white;"> 
         Career's At BVIMIT 
        </a>&nbsp;&nbsp;| 
       </li> 
       <li> 
        <a href="studentlogin.php" style="color: white;"> 
         &nbsp;&nbsp; Student Login 
        </a> 
       </li> 
      </ul> 
    <br><br><br><br> 
      <p class="socialicons" style="color : #f4511e; margin-left: 40%;"> 
      <a href="#" class="fa fa-facebook logo" style="color: #48A6BD"></a> 
      <a href="#" class="fa fa-twitter logo" style="color: #48A6BD"></a> 
      <a href="#" class="fa fa-youtube logo" style="color: #48A6BD"></a> 
      </p> 
     </div> 
     <div class="col-sm-2"> 
     </div> 
    </div> 
</div> 

1. 當我使用img-responsive，圖像當 瀏覽器增加了「平板電腦尺寸」變小。但適用於手機尺寸和平板電腦尺寸的瀏覽器。 當我將img-responsive更改爲image-fluid時，圖片大小 是我想要的桌面大小瀏覽器。 但在調整瀏覽器大小的過程中，<p>元素會在其上重疊。另外，當我將瀏覽器調整爲「手機大小」（使用image-fluid）時，我得到了一個水平滾動條，因爲它沒有調整大小，並保持爲桌面大小的瀏覽器。 在我的代碼中必須刪除哪些內容才能在所有屏幕上響應（高度和寬度都具有響應性）？

2. 我的第二個問題是，我必須使用一個空div從放置2個COLS把我的圖像在屏幕的（第三線從頂部）中心。我可以將div（使用col-*-*）放在中心，而不使用任何空的div標籤。 ？有沒有任何的CSS代碼？

3. 我用padding-left : 12%使<ul>的大小變小，並在列的右側。是否可以在不使用padding-left的情況下對其進行調整和放置？

Answer 1

對於你的第一個問題，我發現了一個速戰速決的圖像上設置style="max-width:100%;height:auto;"（最大寬度防止圖像溢出，高度自動保持比例）。

你的第二個問題是，只是你缺少一個引導類：COL-XX偏移-X，在你的例子，你需要設置<div class=col-sm-4 col-sm-offset-2>

關於第三個問題，你可以通過設置避免了填充你的右對齊元素的width和left margin像這樣：

<ul class="list-group" style="background-color: #6ABED8;width:60%;margin:0 0 0 auto">

希望幫助