2015-02-20 29 views
12

Açılış sayfamı Bootstrap'ten Semantic-UI'ye dönüştürüyorum. Sayfa sabit bir üst navbar konumlandırılmıştır. Ana içerik iki sütuna bölünmüştür (3-cols ve 9-cols). Sol sütun, bir kenar çubuğunu göstermek için kullanılır ve mevcut içerik için doğru sütun kullanılır.Üst navbar, ana içeriğiyle üst üste biniyor

Semantic-UI'nin demo sayfasını kopyalayıp yapıştırmayı denedim. Navbar 45px yüksekliğindedir. Ana içeriğin ilk 45px'inin örtüştüğünü fark ettim.

<link href="//semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/> 
 
<script src="//semantic-ui.com/dist/semantic.min.js"></script> 
 

 
<div id="navbar" class="ui fixed inverted main menu"> 
 
    <div class="container"> 
 
    <div class="title item"> 
 
     <b>Dashboard</b> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="maincontent" class="ui bottom attached segment pushable"> 
 
    
 
    <div id="sidebar" class="ui visible left vertical sidebar menu"> 
 
    <a class="item">First Item</a> 
 
    <a class="item">Second Item</a> 
 
    <a class="item">Third Item</a> 
 
    <a class="item">Fourth Item</a> 
 
    <a class="item">Fifth Item</a> 
 
    </div> 
 
    
 
    <div id="content" class="pusher"> 
 
    <div class="ui basic segment"> 
 
     <h3 class="ui header">Application Content</h3> 
 
     <p>First paragraph...</p> 
 
     <p>Second paragraph...</p> 
 
     <p>Third paragraph...</p> 
 
    </div> 
 
    </div> 
 

 
</div>

Benim şu anki geçici çözüm

gezinme çubuğu sonra 45px yüksek yer tutucu eklemektir.

<div style="height:45px"></div> 

Oldukça iyi css stili adlarının çakışan içeriği düzeltebileceğine eminim.

+0

hiçbir 'id = "kapsayıcı" kodunuzu' eleman yoktur sadece ana kaba bir dolgu eklemeniz gerekir. – phts

+0

Size sorun getiren bir jsfiddle yaparsanız daha iyi olurdu. – phts

+0

Gulp yapıları kullanan herkese işaret ettiğimi düşünürdüm, eğer 'ızgara' öğesi tarafından takip edilen sabit bir menünüz varsa, menünün.variables dosyanızdaki '@fixedPrecedingGridMargin' değişkenini kullanarak ızgara üst kenar boşluğunu özelleştirebilirsiniz. – Kishan

cevap

5

çözüm daha basit:

+0

Bu aslında benim cesur çözümüm değil. Gerçekten pratik. – stanleyxu2005

+0

Bu konuya yeni başlıyorum, bu yüzden basit sorularım :) Bu yüzden yapmamız gereken tek şey, "Ve CSS'nizi ekleyin:" sonra gelen şey, doğru mu? Sadece css görüldü (.ui # içerik vb ...) bootstrap.css dosyasına?Ve ikinci soru, bu css bootstrap.css dosyasındaki herhangi bir yere eklenmeli mi, yoksa sadece dosyanın sonuna mı konulmalı? – user2075599

+1

Oh - ve "doldurma, başlık yüksekliği ile aynı olmalıdır" diyor. Başlık yüksekliğinin ne olduğunu nereden biliyorsunuz? – user2075599

-1

navbar ürününüzün fixed sınıfı vardır. Bu sınıfı öğeden çıkarın ve menünüz bir sayfaya sabitlenmeyecek ve ana sayfanın üst üste gelmeyeceği anlamına gelir. kaydırma: İçerik div üzerinde bir yüksekliğe ayarlayın ve sonra taşma ayarlanır Ne yapabilirdi

http://jsfiddle.net/abszsLno/

+1

Hala navbarın sabitlenmesini istiyorum. İçeriği oldukça uzun ve aşağı kaydırdığınızda, navbar orada kalmalıdır. – stanleyxu2005

1

. Bu sayede herhangi bir uzun içerik div içinde kayar ve sayfa yukarı ve gezinme çubuğunun altında hareket etmez.

<link href="//semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/> 
 
<script src="//semantic-ui.com/dist/semantic.min.js"></script> 
 

 
<div id="navbar" class="ui fixed inverted main menu"> 
 
<div class="container"> 
 
    <div class="title item"> 
 
     <b>Dashboard</b> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="ui grid"> 
 
    <div class="row"> 
 
     <div class="column"> 
 
      <div id="maincontent" class="ui bottom attached segment pushable"> 
 
        <div id="sidebar" class="ui visible left vertical sidebar menu"> 
 
        <a class="item">First Item</a> 
 
        <a class="item">Second Item</a> 
 
        <a class="item">Third Item</a> 
 
        <a class="item">Fourth Item</a> 
 
        <a class="item">Fifth Item</a> 
 
        </div> 
 
        <div id="content" class="pusher"> 
 
        <div class="ui basic segment"> 
 
         <h3 class="ui header">Application Content</h3> 
 
         <p>First paragraph...</p> 
 
         <p>Second paragraph...</p> 
 
         <p>Third paragraph...</p> 
 
        </div> 
 
        </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

2

Izgara sınıfta sayfa içeriğini kaydırmak zorunda.

<div id="navbar" class="ui fixed inverted main menu"> 
<!-- header content here --> 
</div> 
<div id="content" class="ui container"> 
<!-- main content here --> 
</div> 

Ve CSS'nizde ekleyin::

.ui#content{ 
    // padding should be the same as header height 
    padding-top: 55px; 
} 
+0

Kenar çubuğunun yüksekliği tarayıcı penceresine sığamadığı sürece bir çözüme daha yakınlaşıyor. – stanleyxu2005

+0

Neden kenar çubuğunu kullanmak istiyorsunuz? Dikey menü bileşenini almak daha iyi değil mi? Kenar çubuğu, sayfa – niba

+0

içinde itinalı içerik almak istediğinizde daha iyi bir dikey menü denedim, ancak bir kenar çubuğu ile aynı görünmüyor. Yan çubuğun sağında bir gölge var. Kenar çubuğunu kullanırken menü öğeleri arasında bölücüler olacaktır. – stanleyxu2005

İlgili konular