Twitter bootstrap: jak dodać marginesy boczne?

Mam stronę z wyśrodkowanym kontenerem Twitter Bootstrap.Twitter bootstrap: jak dodać marginesy boczne?

Ten kontener ma nagłówek obejmujący całą szerokość (span12), a pod nagłówkiem znajduje się galeria zdjęć, czyli kilka rzędów z 4 komórkami (zawierającymi zdjęcia) w każdym rzędzie.

Chciałbym dodać marginesy boczne do każdego rzędu, tak aby pierwsze i ostatnie zdjęcie nie były w pełni dopasowane z obramowaniem kontenera, a zdjęcia są rozłożone równomiernie. Nie chcę używać przesunięcia1 dla marginesu, ponieważ jest on zbyt duży.

Tu jest link do aktualnej makieta: http://i46.tinypic.com/21e2h4o.jpg

Źródło

2012-06-22 alecswan

można umieścić demo w jsfiddle.net ze znaczników lub makieta zdjęciu? Trudno mi sobie wyobrazić, czego chce. –

Zawarłem link do makiety w moim oryginalnym wpisie. Dzięki – alecswan

czy wypróbowałeś płynną klasę? container-fluid row-fluid –

Można użyć właściwości css nth-child

nth-child(4n+1) na lewym marginesie

nth-child(4n+4) na prawym marginesie

http://css-tricks.com/how-nth-child-works/

Lub

dodać <div> w swojej .span12 z style="padding:0 19px"

i dodać wewnątrz <div class="row-fluid">

<div class="row"> 
    <div class="span12"> 
    <div style="padding:0 19px"> 
     <div class="row-fluid"> 
     <div class="span3">3</div> 
     <div class="span3">3</div> 
     <div class="span3">3</div> 
     <div class="span3">3</div> 
     </div> 
    </div> 
    </div> 
</div>

Źródło

2012-06-23 12:12:39 baptme

Powinienem wspomnieć, że wiem, jak używać selektorów jQuery i CSS3 do ustawienia marginesu. Ale takie podejście przeszkadza naturalnemu sposobowi, w jaki Twitter Bootstrap kładzie komórki w rzędzie i będę musiał dostosować marginesy zgodnie z rozmiarem mediów. Tak więc szukałem sposobu, aby to zrobić z konfiguracjami Bootstrap na Twitterze. – alecswan

span12 jest 940px szerokości. To powinna być szerokość twojej przestrzeni roboczej lub cokolwiek innego. Wydaje się, że 960px jest dość powszechną praktyką wśród systemów gridowych.

Oto moje rozwiązanie ...

<html> 
<head> 
    <title></title> 
    <link href="bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    <style type="text/css"> 
     body { 
      background-color: #CCC; 
     } 

     #SiteBody 
     { 
      width: 960px; 
      margin: 0 auto; 
      background-color: white; 
     } 
    </style> 
</head> 
<body> 
    <div id="SiteBody"> 
     <div class="container"> 
      <div class="row"> 
       <div class="span12"> 
        <h1> 
         My Page</h1> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

Źródło

2012-06-23 22:24:58 Theo

Twitter bootstrap: jak dodać marginesy boczne?

Odpowiedz

Powiązane problemy