Tabs bewegten Körper

Question

Es ist mein erstes Mal versuchen Semantic-Ui.

Ich kam in dieser Ausgabe:

GIF Showing the issue

Meine Registerkarten, um den Körper bewegt machen, das ist ziemlich ärgerlich, und ich kann keine Lösungen finden. Ich habe einen Blick auf die doc, und auch dort einige Beispiele sind gebrochen:/

HTML:

<div class="ui middle aligned center aligned grid"> 
<div class="column"> 
    <h2 class="ui teal image header"> 
     <img src="app/assets/images/logo.png" class="image"> 
     <div class="content"> 
      Log-in to your P4$Q account 
     </div> 
     <img src="app/assets/images/logo.png" class="image"> 
    </h2> 
    <div class="ui large form"> 
     <div class="ui segment" style="background-color: #2b2b2b;"> 
      <div class="ui secondary pointing menu"> 
       <a class="active item" data-tab="first"> 
        Home 
       </a> 
       <a class="item" data-tab="second"> 
        Messages 
       </a> 
       <a class="item" data-tab="third"> 
        Friends 
       </a> 
       <div class="right menu"> 
        <a class="ui item"> 
         Logout 
        </a> 
       </div> 
      </div> 
      <div class="ui bottom attached active tab segment" data-tab="first"> 
       First 
      </div> 
      <div class="ui bottom attached tab segment" data-tab="second"> 
       Second 
      </div> 
      <div class="ui bottom attached tab segment" data-tab="third"> 
       Third 
      </div> 
     </div> 
    </div> 
</div> 

Mit freundlichen Grüßen

Answer 1

ich die Geige überprüft. Im Folgenden finden Sie den funktionierenden JSFiddle.

JSFiddle Demo

Das Problem ist, dass das Stylesheet sematic.min.css wird unter Klasse Zugabe unten.

Die Entfernung des Rands für das letzte Element allein. Sie stehen also vor dem Problem.

Einfachste Lösung dafür ist, eine weitere Klasse mit dem gleichen Namen hinzuzufügen und die Standard-Ränder und Rahmen wie unten, aber fügen Sie !important der CSS-Eigenschaft hinzu! so dass es nicht von der gleichen CSS in sematic.min.css

.ui.segment[class*="bottom attached"]:last-child { 
    margin-bottom:1rem !important; 
} 

Ich schreibe diese Antwort auf die Stellungnahme außer Kraft gesetzt werden, dass sematic.min.css muss nicht geändert werden, sonst, wenn Sie sind offen für Modifizierung der sematic.min.css Sie müssen nur das öffnen Datei in einem Texteditor und setze die Werte wie oben, aber die !important ist nicht erforderlich, da wir an der Quelle selbst ändern!

Es scheint nur eine geringfügige Änderung aufgrund der CSS zu geben.

.ui.attached:not(.message) + .ui.attached.segment:not(.top) { 
    border-top: none; 
} 

dies beheben Sie das CSS-Styling sematic.min.css und entfernen Sie gehen müssen.

Aber es ist eine sehr kleine Änderung und kann ignoriert werden, denke ich!