Question

所以我创建了下面的布局

这是我用来创建布局的代码

<div class="col-xs-12">
    <h3 style="margin-top:50px">
        Key Projects
    </h3>       
        <div class="row">               
                <div class="col-lg-6 col-sm-12">                
              <img id="projectMainImg" src="https://placeimg.com/544/358/arch" alt="" class="img-responsive ">

                </div>
            <div class="row col-lg-6 col-sm-12" >

                        <img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">
                        <img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">
                        <img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">                    

            </div>                
        </div>     
</div>

现在我的问题是当我进入chrome调试器并调整屏幕大小时，我得到以下内容

我教会在div中使用col-sm-12，class="img-responsive"会在调整窗口大小时使较小的图像整齐地堆叠在大图像下。

我在BootStrap网站上花了很多时间，但我无法理解。任何人都可以帮忙解释我需要做什么吗？

Answer 1

拜托，看看。我已经替换img-fluid <div class="col-xs-12"> <h3 style="margin-top:50px"> Key Projects </h3> <div class="row"> <div class="col-lg-6 col-sm-12"> <img id="projectMainImg" src="https://placeimg.com/544/358/arch" alt="" class="img-fluid"> </div> <div class="row col-lg-6 col-sm-12"> <img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-fluid"> <img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-fluid"> <img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-fluid"> </div> </div> </div>上的所有server: port: 8888 spring: cloud: config: server: git: uri: https://github.com/Girdhars/config-server.git application: name: config-server management: security: enabled: false。此外，他们有边距和填充类，所以最好不要使用内联。

＆＃13;

{
    "timestamp": 1515082055134,
    "status": 404,
    "error": "Not Found",
    "exception": "org.springframework.cloud.config.server.environment.NoSuchRepositoryException",
    "message": "Cannot clone or checkout repository: https://github.com/Girdhars/config-server.git",
    "path": "/application/default"
}

＆＃13;

Answer 2

最新版本的bootstrap img-responsive 已替换为 img-fluid 类。

Answer 3

更改为：

<div class="col-xs-12">
<h3 style="margin-top:50px">
    Key Projects
</h3>       
<div class="row">               
            <div class="col-lg-6 col-sm-12">                
          <img id="projectMainImg" src="https://placeimg.com/544/358/arch" alt="" class="img-responsive ">

            </div>
        <div class="col-lg-6 col-sm-12" >
               <div class="row">
                   <div class="col-sm-12 col-lg-6">
                       <img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">

                   </div>
                   <div class="col-sm-12 col-lg-6">
                       <img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">

                   </div>
                  <div class="col-sm-12 col-lg-6">
                       <img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">

                   </div>
                   <div class="col-sm-12 col-lg-6">
                       <img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">

                   </div>
               </div>
        </div>                
    </div>

Bootstrap Image不会调整大小

3 个答案: