我在这个网站上工作http://tosamaganga.nowcommu.myhostpoint.ch/index.html 是用Bootstrap制作的。完全响应，但我在主页上有一些问题。
当您在Ipad上查看网站时，3张图片看起来并没有响应＆＃34;我想要做的是在Ipad上创建一个orizzontal列，内嵌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 -->
答案 0 :(得分：1)
使用不同的列大小(col-sm-4)并使用默认的row来保存这些12列（通常）。我会避免使用align="left/center/right"，你不应该需要它，网格应该处理它，如果你使用img-responsive，那么不要对图像内联使用固定尺寸（宽度拼写错误＆gt; 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>
答案 1 :(得分：0)
答案 2 :(得分：0)
这是因为你缺少col-sm。 如果你想将3个图像排成一行，在3个div中添加col-sm-4类或用col-sm替换col-md。 如果您希望每张照片采用全屏宽度，请使用col-sm-12。