Bootstrap Altbilgisi, Sayfa Tam Genişliği

Joomla ile bir web sitesi tasarlama ve önyükleme çerçevesini kullanma. Şimdi altbilgim tarafından bir sorunum var. Temel olarak basit bir ızgara düzeni kullanıyorum ve sitenin içerik bölümünü sayfanın ortasına sol ve sağ taraftaki boşluğa yerleştirmek istiyorum. Ve şimdi altbilgiyi ortadaki gibi değil, sayfanın sonundaki ve tüm genişliğinin üzerinde ve SABİT DEĞİL. Bu yüzden normal olarak sayfayı aşağı kaydırmak istiyorum ve sonunda altbilgi tam genişlikte görünecektir. Uzun bir süre aradım ama işe yarayan bir çözüm bulamadım. Aşağıdaki ben birileri bana bunu başarmak için yardımcı olabilir umut ...Bootstrap Altbilgisi, Sayfa Tam Genişliği

php sayfasının komut ve ben

index.php

<!DOCTYPE html> 
<html> 
<head> 
    <jdoc:include type="head" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
    <!-- main container --> 
    <div class='container'> 
     <!-- header --> 
     <div class="mainMenuTop"/> 
     <div class='row'> 
      <jdoc:include type="modules" name="position-1" style="well" /> 
     </div> 
     <div class='row'> 
      <!-- main content area --> 
      <div class='span12'> 
       <div class="article"> 
        <jdoc:include type="component" /> 
       </div> 
      </div> 
     </div> 
     <!-- footer --> 
     <div class='row'> 
      <div class='span12'> 
       <div class='footer'> 
       <jdoc:include type="modules" name="footer" style="none" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

stilini kullanılan css dosyası vardır. css

body 
{ 
    overflow-y: scroll; 
    background: url(../images/Test.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

.article 
{ 
    padding: 25px; 
    margin-top: 30px; 
    margin-bottom: 30px; 
    border-radius: 18px; 
    background: rgba(255, 255, 255, 0.5); 
    background: rgba(255, 255, 255); /* The Fallback */ 
    font-size: 12pt; 
    font-family:"Calibri", Times, serif; 
} 

.footer 
{ 
    height: 50px; 
    border-top: solid 1px black; 
}

Saygılarımızla, oodoloo

kaynak

2014-04-09 oodoloo

Altyazı, ana içerik kapsayıcısından sonra <div class="container">'u ayırmak için koyabilirsiniz. Ardından ana içeriğin olduğu gibi altbilginin genişliğini sınırlamayan bir kapsayıcı sınıf atayabilirsiniz. Burada gördüğünüz gibi Örn :: benim ihtiyaçları için

<div class="container"> 
     ... 
</div> 
<div id="footer" class="container-fluid"> 
    <div class="row">....</div> 
</div>

kaynak

2014-04-09 18:24:56

Teşekkür! Bunu denedim, ama bu ihtiyaçlar için yeterli değildi. Şimdi nasıl başarabileceğimi bilmiyorum, div tam sayfayı doldurur. Ve bir sabit genişlik ayarladığımda div sadece sağ tarafa doğru genişler, sol taraf da içeriğin başladığı noktada başlar. Bir kez daha yardım edebilir misiniz lütfen? – oodoloo

jsfiddle.net veya codepen.io üzerinde paylaşılan yalıtılmış ve tekrarlanabilir bir örnek oluşturabilir misiniz? Gerçek kodu okuyamaz ve düzenleyemezseniz, çok fazla çaba harcamadan, sadece genel tavsiyelerde bulunabilirsiniz. –

Tamam, burada [jsfiddle-example] (http://jsfiddle.net/Pxmv7/) bir örnek oluşturdum. Sonunda altbilgi için ilk yazımda anlattığım sonucu elde etmek istiyorum. Umarım bu sorunu çözmek için yardımcı olur. Son yorumumda anlattığım üreme için, örneğin css 'width: 800px' ya da 'width: 1500px' eklenmesi gerekiyor. – oodoloo

, şimdi ben düzelttim: jsfiddle-example

.footer 
{ 
    height: 50px; 
    background-color: black; 
    position: absolute; 
    left: 0; 
    right: 0; 
    width: 100%; 
}

ekledim "width: 100%" var, "position: absolute", " sol: 0 "ve" sağa: 0 "css sınıfına" .footer ". Bence belirleyici "pozisyon: mutlak" idi. O zaman sol taraf tam boyutu almıyor çünkü "sol: 0" eklemek zorunda. bunu ekledikten sonra yapar. Tamlık nedeniyle "sağa: 0" ekledim. Başka bir tarayıcıda gerekli olup olmadığını bilmiyor. Burada da olmadan çalışır.

kaynak

2014-05-10 10:42:16 oodoloo

Evet, sol 0, sağ 0 benim için düzeltildi. –

ben bunu yaparsak ve bu haklı: Hızlı cevap için

@media(max-width:500px){ 

    .footer{ 
     float:left; 
     width:109%; 
     margin-left:-5%; 
    } 

}

kaynak

2016-08-31 21:19:07 Cristian

Bootstrap Altbilgisi, Sayfa Tam Genişliği

cevap

İlgili konular