Question

我正在尝试使用bootstrap使我的网页响应。
我希望在屏幕尺寸低于767 px时移除最大的图像。
我想要内容图像和内容标题在移动设备中并列，并且主要列表可以完全原始。但现在没有发生。
使用的图像大小为：content image- 250X250, featured image: 570X570, small images: 260X170

我无法为小屏幕设备设置2个小图像的大小。

<body>

<div class="container header-container">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar5">
          <span class="sr-only">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" class="img-responsive" alt="Logo image"></a>
      </div>
      <div id="navbar5" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">24X7 Customer Support</a></li>
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Login</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>

</div>




    <!-- Page Content -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 content">
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 content-image">
                <img src="images/content.png" class="img-responsive" alt="content-image">
                </div>
                <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 content-title">
                    <h3>First Title here</h3>
                    <h2>Sub title here</h2>
                </div>
                </div>
            <div class="row">
                 <ul class="col-md-12 col-sm-12 col-xs-12 col-lg-12 main-list">
                        <li>ab jj jj jjh j hj jhj j hjhj h vgcfcgjv cggjbkjjjbhjbjbjbjbb</li>
                        <li>ab jj jj jjh j hj jhj j hjhj h vgcfcgjv cggjbkjjjbhjbjbjbjbb</li>
                        <li>ab jj jj jjh j hj jhj j hjhj h vgcfcgjv cggjbkjjjbhjbjbjbjbb</li>
                        <li>ab jj jj jjh j hj jhj j hjhj h vgcfcgjv cggjbkjjjbhjbjbjbjbb</li>
                </ul>
                <div class="row">

                <img class="col-md-6 small-image1 img-responsive" src="images/image1.png">
                <img class="col-md-6 small-image2 img-responsive" src="images/image2.png">
                </div>
            </div>
            </div>

            <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 featured-image">
                <img src="images/featured image.png" class="img-responsive">
            </div>
        </div>
         <!-- end row-->

        <div class="row">
            <div class="col-md-12">
                <h2 class="courseHeading">Choose the State-Approved Course That Fits You Best</h2>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3 courses">
                    <h5>ABCDEFGHig</h5>
                    <h4>Product A</h4>
                    <a href="#" class="enrolLink">ABCDEFGHig</a>
                    <div class="info">product info1<br>Product Info 2 <br> Product info 3</div>
                </div>

                <!-- *********Second course******** -->
                <div class="col-md-3 courses">
                    <h5>ABCDEFGHig</h5>
                    <h4>Product B</h4>
                    <a href="#" class="enrolLink">ABCDEFGHig</a>
                    <div class="info">Product info 1<br>Product Info 2 <br> Product info 3</div>
               </div>

                <!-- *********Third course******** -->
                <div class="col-md-3 courses">
                    <h5>ABCDEFGHig</h5>
                    <h4>Product C</h4>
                    <a href="#" class="enrolLink">ABCDEFGHig</a>
                    <div class="info">Product info 1<br>Product Info 2 <br> Product info 3</div>
                </div>
        </div>


    </div>
    <!-- /.container -->

    <!-- jQuery -->
    <script src="js/jquery-3.1.0.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

</body>

这是我的代码的小提琴： https://jsfiddle.net/Lfqgq64p/

有人可以帮我解决这个问题吗？最诚挚的问候。

针对小型设备无响应的响应式网页

0 个答案: