Question

我目前正在为我的全新创作建立网站 - 因为我从未成为这样的CSS大师 - 我需要你的灯！

有一个中央屏幕截图（里面有编辑器）。当窗口处于完整大小时，屏幕截图看起来很好并且按照它应该是居中的。当我开始减小窗口的宽度时，图像看起来好像向右移动。是否可以将其保留在最初的位置，并在窗口调整大小时调整大小？
在调整大小时，navbar菜单会折叠，并在其位置创建一个切换按钮（移动式）。有没有办法禁用它？或者，至少，不是在那个阶段触发，而是以较小的宽度触发（navbar-brand仍适合）？

这是核心HTML部分：

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" >
                    <span class="sr-only" style="color:black;">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img src="images/logo.png" width="40">&nbsp;&nbsp;Peppermint</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#"><i class="fa fa-home"></i>&nbsp;&nbsp;Overview</a></li>
                    <li><a href="#"><i class="fa fa-question-circle"></i>&nbsp;&nbsp;Documentation</a></li>
                    <li><a href="http://sites.fastspring.com/insili/product/peppermint" target="_blank"><i class="fa fa-shopping-cart"></i>&nbsp;&nbsp;Buy</a></li>
                    <li><a href="mailto:info@insili.co.uk?subject=Peppermint Support Request"><i class="fa fa-life-ring"></i>&nbsp;&nbsp;Support</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="header">
        <div class="container" >
            <div class="row-fluid" style="text-align:center;">
                <img src="images/screenshot2.png" >
            </div>
        </div>
    </div>

这是实时页面： http://www.osxpeppermint.com

非常感谢！

Answer 1

图像比包含的div大，所以它跳到外面。最简单的解决方案是将img-responsive添加到图像中：

<img src="images/screenshot2.png" class="img-responsive">

如果您希望导航栏以不同的屏幕宽度折叠，则需要自定义下载Bootstrap库。转到http://getbootstrap.com/customize/并将@grid-float-breakpoint值从其@screen-sm-min的默认值更改为您需要的任何宽度。

Bootstrap调整大小和自动折叠

1 个答案: