引导问题与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">

希望帮助