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>

当我使用img-responsive时，图像会变小浏览器增加“平板电脑大小”。但它非常适合移动尺寸和平板电脑尺寸的浏览器。当我将img-responsive更改为image-fluid时，图片大小是我想要的桌面大小浏览器。但是在调整浏览器大小期间，<p>元素会重叠在其上。此外，当我将浏览器调整为“移动大小”（使用image-fluid）时，我会为我的图像获得一个水平滚动条，因为它不会调整大小并保持原样桌面大小< / strong>浏览器。 我的代码中必须删除哪些内容才能在所有屏幕上响应（高度和宽度都有响应）？

我的第二个问题是，我必须使用左边的空div进行2列，将我的图像放在屏幕中央（从顶部开始的第三行）。我可以将div（使用col-*-*）放在中心，而不使用任何空的div标记。？那有什么css代码吗？

我使用padding-left : 12%使<ul>的大小变小，位于列的右侧。是否可以在不使用padding-left的情况下调整大小并放在右侧？

Answer 1

对于您的第一个问题，我通过在图片上设置style="max-width:100%;height:auto;"找到了一个快速解决方法（最大宽度可防止图像溢出，高度自动保持比例）。

你的第二个问题只是你缺少的一个引导类：col-XX-offset-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">

希望有所帮助

img-responsive和div标签的bootstrap问题

1 个答案: