css - 响应式主页(平板电脑): one single column

Question

我正在这个网站上工作 http://tosamaganga.nowcommu.myhostpoint.ch/index.html使用 Bootstrap 制作。完全响应，但我在主页上遇到了一些问题。

这 3 张图片，当您在 Ipad 上查看网站时，看起来没有“响应”。我想做的是在 Ipad 上创建一个单独的水平列，内联 3 张图片。

我该如何解决？

 <!-- CONTENT -->
<section id="services" class="section text-center">
    <div class="container">
        <h2 class="section-title wow fadeIn"> </h2>
        <div class="row_2">
            <div class="col-md-4">
                <div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s">
                    <div class="service-title">
                    </div>
                    <div class="service-content">
                        <img src="img/1_Kreis.jpg" widht="340" height="340" class="img-responsive" align="left" />
                    </div>
                </div>
            </div>

           <div class="col-md-4">
                <div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s">
                    <div class="service-title">
                    </div>
                    <div class="service-content">
                        <img src="img/ilona_home.jpg" widht="340" height="340" class="img-responsive" align="center" />
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s">
                    <div class="service-title">
                    </div>
                    <div class="service-content">
                        <img src="img/tower_home.jpg" widht="340" height="340" class="img-responsive" align="right" />
             </div>
                </div>
                </div>
                <div class="col-lg-6">
                    <br>
                <h3 align="left">Helfen, wo Hilfe lebensnotwendig ist.<br>Jeder Franken erreicht seine Bestimmung.</h3><br>
                </div>
                <div class="col-md-8"> 
                    <h4 align="left">Freunde von Tosamaganga</h4>
                    <p class="home_text" align="left">Die Stiftung „Freunde von Tosamaganga“ wird getragen von einer Gruppe von Unternehmern, Ärzten, Ingenieuren und medizinischem Fachpersonal, die sich zum Ziel gesetzt haben, etwas von dem zurück zu geben und zu fördern, was wir glücklicherweise als selbstverständlich ansehen.<br><br>So heterogen wie die Zusammensetzung unseres Teams ist, so vielfältig ist unser Engagement. Tansania ist eines der ärmsten Länder dieser Erde. Insbesondere im Landesinneren herrscht grosse Armut. Es fehlt an vielen lebensnotwendigen Dingen, wie sauberem Wasser, Strom und medizinischer Basisversorgung. Genau hier ist unser Ansatz.<br>Im Namen des Stiftungsrates danken wir Ihnen herzlich für Ihre Unterstützung.<br><br>
                        Prof. Dr. med. Robert E. Oellinger<br>Facharzt für plastische und ästhetische Chirurgie
               </div>
               <div class="col-md-4"> 
                    <img src="img/oellinger.jpg" width="230" height="320" class="img-responsive" align="right">
               </div>

    </div>
    <!--/.container -->
</section>
<!-- END CONTENT -->

Answer 1

使用不同的列大小 (col-sm-4) 并使用默认的 row 来保存这 12 列(通常)。我会避免使用 align="left/center/right"，你不应该需要它，网格应该处理它，如果你使用 img-responsive 那么不要使用固定尺寸图像内联(宽度拼写错误 > widht="340" 应该是 width="340")。

然后您可以使用媒体查询相应地调整您的布局。参见示例。

@media (max-width: 767px) {
  .service-content img {
    width: 340px;
    margin: 5px auto;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<section id="services" class="section text-center">
    <div class="container">
         <h2 class="section-title wow fadeIn"> </h2>

        <div class="row">
            <div class="col-sm-4">
                <div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s">
                    <div class="service-title"></div>
                    <div class="service-content">
                        <img src="http://tosamaganga.nowcommu.myhostpoint.ch/img/1_Kreis.jpg" class="img-responsive" />
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s">
                    <div class="service-title"></div>
                    <div class="service-content">
                        <img src="http://tosamaganga.nowcommu.myhostpoint.ch/img/1_Kreis.jpg" class="img-responsive" />
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s">
                    <div class="service-title"></div>
                    <div class="service-content">
                        <img src="http://tosamaganga.nowcommu.myhostpoint.ch/img/1_Kreis.jpg" class="img-responsive" />
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <br>
                 <h3 align="left">Helfen, wo Hilfe lebensnotwendig ist.<br>Jeder Franken erreicht seine Bestimmung.</h3>

                <br>
            </div>
            <div class="col-sm-8">
                 <h4 align="left">Freunde von Tosamaganga</h4>

                <p class="home_text" align="left">Die Stiftung „Freunde von Tosamaganga“ wird getragen von einer Gruppe von Unternehmern, Ärzten, Ingenieuren und medizinischem Fachpersonal, die sich zum Ziel gesetzt haben, etwas von dem zurück zu geben und zu fördern, was wir glücklicherweise als selbstverständlich ansehen.
                    <br>
                    <br>So heterogen wie die Zusammensetzung unseres Teams ist, so vielfältig ist unser Engagement. Tansania ist eines der ärmsten Länder dieser Erde. Insbesondere im Landesinneren herrscht grosse Armut. Es fehlt an vielen lebensnotwendigen Dingen, wie sauberem Wasser, Strom und medizinischer Basisversorgung. Genau hier ist unser Ansatz.
                    <br>Im Namen des Stiftungsrates danken wir Ihnen herzlich für Ihre Unterstützung.
                    <br>
                    <br>Prof. Dr. med. Robert E. Oellinger
                    <br>Facharzt für plastische und ästhetische Chirurgie</div>
            <div class="col-sm-4">
                <div class="service-content">
                <img src="http://tosamaganga.nowcommu.myhostpoint.ch/img/oellinger.jpg" class="img-responsive" />
            </div></div>
        </div>
    </div>
</section>
<!-- END CONTENT -->
<!-- FOOTER CONTENT -->
<footer class="footer">
    <div class="container">
        <p class="text-muted">© 2015 - Freunde für Tosamaganga. All rights reserved.</p>
    </div>
</footer>