Question

我有几个关于bootstrap的问题。

当在PC上调整大小时，有没有办法在某个视图（320px）上修复引导网站？你会怎么做？我目前正在使用铬来测试它。
另外一件事，我在导航栏上有这个标识，有没有办法在其中插入图像并使用css样式自动调整大小，而不是在图像编辑器上缩小图像，也可以将其放在前面不在其中的导航栏。

当我调整宽度小于200px的网站时，横幅图像会变小并显示jumbotron背后的背景。如何使图像贴合顶部导航栏？

练习网站1 Bootstrap

        <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav navbar-right">


        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT US</a></li>
        <li><a href="#">LINKS</a></li>
        <li class="dropdown"> <!-- Dropdown Link Start-->
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">MEDIA<b class="caret"></b></a>
        <ul class="dropdown-menu"> 
            <li><a href="#">FACEBOOK</a></li>
            <li><a href="#">TWITTER</a></li>
            </ul> <!-- Dropdown Link End-->
        </li>
        <li><a href="#">CONTACT</a></li>
        </ul>
        </div>
</div>
</div> <!-- Navigational Start Container-->

    <div class="jumbotron">
    <h1>Success!!!</h1>

删除了Jumbotron Padding和Margin /仍然没有成功

<div class="container"> <!-- Grid System Content -->
    <div class="row">
    <div class="col-md-4">
    <h3><a href="#">LOREM IPSUM DOLOR 1</a></h3>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit<a class="btn btn-danger">ReadMore</a></p>
    </div>
    <div class="col-md-4">
    <h3><a href="#">LOREM IPSUM DOLOR 2</a></h3>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit <a class="btn btn-danger">ReadMore</a></p>
    </div>
    <div class="col-md-4">
    <h3><a href="#">LOREM IPSUM DOLOR 3</a></h3>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit.  <a class="btn btn-danger">Read More</a></p>
    </div>
    </div>

</div>


<!-- Footer Start-->
<div class="navbar navbar-inverse navbar-fixed-bottom">
    <div class="container">
    <p class="navbar-text pull-left ">KREATIV TECH COPYRIGHT 2014</p>
    <a href="http:youtube.com"class= "navbar-button btn-danger btn pull-right">Subscribe on Youtube</a>
</div> <!-- Footer Start-->

    <!-- jquery and javascript start script -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script> <!-- JS End Script-->

Answer 1

1）您可以将行类设置为col-xs-＃number，其中#number在1到12之间，具体取决于行的宽度。这意味着您的网站“适用于”移动/较小的屏幕，而任何桌面/大屏幕使用它都具有相同的样式。

2）你可以这样做：

<a href="#" class="navbar-brand"><img src="/urlpath.jpg" id="images_id" /></a>

和

#images_id {
height: desired_height;
width: desired_width;
}

3）你可以给图像一个'img-responsive'类。或者您可以设置相对于导航栏宽度和高度的图像大小，它将像导航栏一样缩小。

Bootstrap响应式网站，但修复了一定的宽度

1 个答案: