Pozioma i pionowa separacja przycisków Twitter Bootstrap

Co powoduje poziomy przycisków rozdzielczych Twitter Bootstrap?Pozioma i pionowa separacja przycisków Twitter Bootstrap

enter image description here

nie mogę znaleźć go w kodzie CSS.

staram się powtórzyć ten sam do pionu, ale wydaje się, że jestem nieosiągnięciem to:

enter image description here

Jak mogę dodać separację pionową pomiędzy przyciskami, tylko wtedy, gdy” ponownie ułożone pionowo (drugie zdjęcie), ale unikając tego samego (w tym przypadku niepotrzebnego), kiedy nie są (pierwsze zdjęcie)?

EDIT: Kod używany do generowania powyżej zdjęć:

<div class="container-fluid"> 

    <div class="row-fluid"> 

     <div class="well well-small" id="menu-buttons"> 

      <div class="pull-left" style="width: 48%"> 

       <a class="btn btn-small">@ Style ^</a> 
       <a class="btn btn-small">@ Language ^</a> 

      </div> 

      <div class="pull-right text-right" style="width: 48%;"> 

       <a class="btn btn-small">@ Device</a> 
       <a class="btn btn-small">@ Webpage</a> 

      </div> 

      <div style="clear: both"></div> 

     </div> 

    </div> 

</div>

Źródło

2013-07-23 trejder

Byłoby łatwiej odpowiedz, że jeśli pokazałeś swój kod. Domyślam się, że ma to coś wspólnego z elementami pływającymi, zobacz od inspektora sieci, czy przyciski "@ Device" i "@ Webpage" mają zdefiniowaną wartość float. – quinnirill

zawij ten przycisk w 'div' za pomocą' inline-block'. Incase, jeśli jest to ze względu na float, użyj 'clear: both', – Praveen

@quinnirill: Przepraszamy za to, że go nie ma. Oto zaktualizowane pytanie z kodem. – trejder

Co chciałbym zrobić coś takiego:

.btn { 
    margin: 2px; 
} 
.well { 
    padding: 7px; 
}

Więc dodana margines 2px wokół każdego przycisku, a zmniejszył wyściółkę pojemnika (.Dobrze) przez 2 piksele. W ten sposób styl "pełnej szerokości" pozostanie niezmieniony, a styl "wąski" będzie miał teraz 4-piksetowy odstęp między przyciskami.

Możesz reklamą dodatkową ID lub coś w przedniej części tych selektorów, aby to działało tylko na swoim „# menu przycisków”

i przykład: http://jsfiddle.net/eHYnQ/

Źródło

2013-07-23 13:04:25 Pevara

Człowieku, wydaje się, że twoje rozwiązanie ROCKS! Pozwól mi zrobić jeszcze kilka kontroli, ale naprawdę wygląda obiecująco. – trejder

Nie rozumiem, dlaczego bootstrap nie ma klasy dla najlepszego przygotowanego marginesu –

Można to zrobić dodając właściwość margin-bottom do przycisków. Na pierwszym zdjęciu, to chyba float: right; z margin-right: 5px;

Źródło

2013-07-23 12:08:49

To jest pierwsza rzecz, o której pomyślałem i nie zadziała. Dodanie "margin-bottom" na stałe (w obu przypadkach) spowoduje niedopuszczalną dodatkową przestrzeń między przyciskami i dolną krawędzią studni, która je otacza, w pierwszym przypadku (gdy przyciski nie są ułożone pionowo). – trejder

można spróbować Opierając się na następujące:

#menu-buttons a:first-child { 
    margin-bottom: 3px; 
}

(Selektor jest jawnie specyficzne, trzeba coś z tym zrobić)

Źródło

2013-07-23 12:22:08 quinnirill

To nie zadziała - zobacz mój komentarz do odpowiedzi Amine powyżej. Działa dobrze, gdy przyciski są ułożone pionowo, ale wygląda źle (pierwszy i drugi przycisk w każdej źle wyregulowanej grupie), gdy nie są ułożone w stos i wszystkie znajdują się w jednej linii. – trejder

Upon sprawdzając swój kod, masz zawiniętą parę przycisków wewnątrz elementu div.

Więc zamiast % zmiana wartości do px

<div class="pull-left" style="width: 115px; "> <a class="btn btn-small">@ Style ^</a> 
<a class="btn btn-small">@ Language ^</a> 

</div> 
<div class="pull-right text-right" style="width: 115px;"> <a class="btn btn-small">@ Device</a> 
<a class="btn btn-small">@ Webpage</a> 

</div>

sprawdzić ten JSFiddle

aktualizacje: jak wspomniano w komentarzach na temat projektu płynu, tutaj jest prosty sposób na zrobienie tego w HTML <br/> tag, aby uzyskać podziały linii.

<div class="pull-left" style="width: 38% "> <a class="btn btn-small">@ Style ^</a> 
    <br/> <a class="btn btn-small">@ Language ^</a> 

</div> 
<div class="pull-right text-right" style="width: 38%"> <a class="btn btn-small">@ Device</a> 
    <br/> <a class="btn btn-small">@ Webpage</a> 

</div>

Updated Fiddle

Źródło

2013-07-23 12:48:30 Praveen

Jak widać (klasy 'container-fluid' i' row-fluid' na górze divs) jest to układ płynów, więc podanie wartości bezwzględnych w pikselach nie jest wcale opcją. Komentarz boczny: Otworzyłem jsFiddle i nie widzę pionowej separacji w obu grupach przycisków. – trejder

@trejder czy jesteś pewien, że moje jsfiddle nie działa? – Praveen

@trejder Sprawdź moją zaktualizowaną odpowiedź. – Praveen

To klasa row-fluid który powoduje marginesu poziomego.
Można wykonać row-fluid w row fluid, aby uzyskać odstępy w pionie.
Zobacz bootstrap - fluidGridSystem w zakładce Fluid.

Należy również używać span klas naprawić szerokość

Fiddle: here
ekranu:

Screen capture

Oto mój kod:
Ostrzeżenie Zdjąć <div class="span3" style="background-color:whitesmoke"> na pełnym ekranie o szerokości div

<!Doctype html> 
<html> 
<head> 
    <link href="../css/bootstrap.css" type="text/css" rel="stylesheet" media="all"> 
</head> 
<body> 
     <div class="span3" style="background-color:whitesmoke"> 
      <div class="row-fluid"> 

       <div class="row-fluid"> 

        <div class="span6"> 
         <button>1</button> 
        </div> 
        <div class="span6"> 
         <button class="pull-right">2</button> 
        </div> 

       </div> 

       <div class="row-fluid"> 

        <div class="span6"> 
         <button>3</button> 
        </div> 
        <div class="span6"> 
         <button class="pull-right">4</button> 
        </div> 

       </div> 

      </div> 
     </div> 
</body> 
</html>

Źródło

2013-07-23 12:50:38 Done

Umieszczam twój kod w kopalni, zi bez otaczania go 'container-fluid', aw obu przypadkach widzę dziwne wyniki - każdy przycisk jest w osobnym wierszu. Może coś mi brakuje? To zupełnie nie jest to, czego szukam. Wyniki są zupełnie inne niż przedstawione na moich zdjęciach. Czy masz jakieś skrzypce do zaprezentowania, że twoje rozwiązanie faktycznie działa. – trejder

Ach, rozumiem. Twoja dusza działa idealnie na rozdzielczościach panoramicznych. Ale całkowicie nie działa na urządzeniach mobilnych. – trejder

http://jsfiddle.net/TJUcg/ – Done

Pozioma i pionowa separacja przycisków Twitter Bootstrap

Odpowiedz

Powiązane problemy