在移动设备上添加填充

时间:2015-10-12 11:06:19

标签: twitter-bootstrap mobile responsive-design

我在这个页面http://www.grisard.ch/uferstrasse/imfoyeru90/

正如您从移动设备的屏幕截图中看到的那样,没有填充(但我已经设置了媒体查询,我认为没问题)。

我该如何解决?enter image description here

HTML:

 <div class="container-fluid">
             <div class="row fluid">

                <div class="col-md-6 simona">
                   <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
      <!-- Indicators -->

      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="item active"> <img src="img/simona.jpg" style="width:100%" alt="First slide">

        </div>
        <div class="item"> <img src="img/simona2.jpg" style="width:100%" data-src="" alt="Second    slide">

        </div>
        <div class="item"> <img src="img/simona3.jpg" style="width:100%" data-src="" alt="Third slide">

        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div> 
                </div>

                <div class="col-md-6 logo">
                  <img class="img-responsive" src="img/logo.png" />  
                </div>


                 <div class="col-md-6 date">

                  <h3>AHNENGALERIE<br>Uferstrasse 90, 4057 Basel</h3>
                    <h5 class="date">27.10.2015 &#x2013 07.12.2015 </h5>   

                </div>

                        <div class="row">
                        <div class="col-md-6">    
            <div class="col-md-3 dates"><p><strong></b>Vernissage:</strong><br>27.10.2015<br>18.00–20.00 Uhr</p></div>
            <div class="col-md-3 dates"><p><strong>Lesung:</strong><br>16.11.2015<br>18.00 Uhr</p></div>
            <div class="col-md-3 dates"><p><strong>Finissage:</strong><br>07.12.2015<br>18.00–20.00 Uhr</p></div>
                <div class="col-md-8"> <p class="bio">Bild eins: «unsagbar» 
    aus dem Zyklus «Ahnengalerie»
    Raffaello hat sie geküsst
    Leonardo war beim Vesper 
    zugegen. Hinter dem Vorhang kommt sie auf eine neue Idee.
    Sie könnte als Skulptur leben. 
    In meiner Malerei geht es um 
    Formen von Lebenserfahrungen.
    Um die Sehnsucht, das Unsagbare darstellen zu können. Und um die Unerträglichkeit, dafür niemals erlösende Bilder zu finden. 
    Was geschieht - ich lasse mich ins Unterbewusstsein fallen und finde Fragmente.
    Künstlerin: Simona Deflorin.</p></div> 

            </div>
            </div>




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

CSS:

@media only screen 
              and (min-device-width: 320px) 
              and (max-device-width: 480px)
              and (-webkit-min-device-pixel-ratio: 2) {
                  .dates { padding-left: 15px !important; }
                  .bio { padding-left: 15px !important; }
            }

            @media only screen 
            and (min-device-width : 768px) 
            and (max-device-width : 1024px)  { 
                .dates { padding-left: 15px !important; }
                  .bio { padding-left: 15px !important; }

            }

1 个答案:

答案 0 :(得分:1)

试试这个,希望它能解决您的问题。

<div class="container-fluid">
             <div class="row fluid">

                <div class="col-md-6 simona">
                   <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
      <!-- Indicators -->

      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="item active"> <img src="img/simona.jpg" style="width:100%" alt="First slide">

        </div>
        <div class="item"> <img src="img/simona2.jpg" style="width:100%" data-src="" alt="Second    slide">

        </div>
        <div class="item"> <img src="img/simona3.jpg" style="width:100%" data-src="" alt="Third slide">

        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div> 
                </div>

                <div class="col-md-6 logo">
                  <img class="img-responsive" src="img/logo.png" />  
                </div>


                 <div class="col-md-6 date">

                  <h3>AHNENGALERIE<br>Uferstrasse 90, 4057 Basel</h3>
                    <h5 class="date">27.10.2015 &#x2013 07.12.2015 </h5>   

                </div>

                        <div class="row container">
                        <div class="col-md-6">    
            <div class="col-md-3 dates"><p><strong></b>Vernissage:</strong><br>27.10.2015<br>18.00–20.00 Uhr</p></div>
            <div class="col-md-3 dates"><p><strong>Lesung:</strong><br>16.11.2015<br>18.00 Uhr</p></div>
            <div class="col-md-3 dates"><p><strong>Finissage:</strong><br>07.12.2015<br>18.00–20.00 Uhr</p></div>
                <div class="col-md-8"> <p class="bio">Bild eins: «unsagbar» 
    aus dem Zyklus «Ahnengalerie»
    Raffaello hat sie geküsst
    Leonardo war beim Vesper 
    zugegen. Hinter dem Vorhang kommt sie auf eine neue Idee.
    Sie könnte als Skulptur leben. 
    In meiner Malerei geht es um 
    Formen von Lebenserfahrungen.
    Um die Sehnsucht, das Unsagbare darstellen zu können. Und um die Unerträglichkeit, dafür niemals erlösende Bilder zu finden. 
    Was geschieht - ich lasse mich ins Unterbewusstsein fallen und finde Fragmente.
    Künstlerin: Simona Deflorin.</p></div> 

            </div>
            </div>




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