Baykuş sürgüsü, 768 px genişlik

Question

altında çalışmıyor, düzgün çalışmasını sağlamak için owl_slider uzantısını (2.3.3 üzerinden TYP typo3 7.6.2) almada sorun yaşıyorum. Kaydırıcıyı çalıştırmayı başardım ama tarayıcı genişliğini 768 pikselin altına değiştirdiğimde üstbilgi ve altbilgi resimlerim çok büyük bir şekilde görüntülenir ve içerik (kaydırıcı, metin vb.) Artık içerik alanına sığmaz (bootstrap container)). Sayfada bir kaydırıcı olmadığında yeniden boyutlandırma sorunsuz çalışır.

Baykuş sürgü öğelerini incelediğimde, tarayıcı genişliğimle genişlik değişimini görebiliyorum, 768'in altında, garip değerleri (ekli olan ve düzgün görüntülenmemesinin nedeni olmalıdır) hesaplar. Herhangi bir fikir ?

Düzenleme: Sadece {content} ile bir şablonu denedim, kaydırıcının işlevi yoktu, sonra bir kapsayıcının içine koydum ve çalıştı. Neden bu davranış?

şablonu:

<header class="page-row container-fluid"> 
    <div style="position:fixed;top:0px;z-index:20;" >   
     <img class="img-responsive" src="fileadmin/user_upload/slider_top_text.png" width="100%"/>   
    </div> 
    <img src="fileadmin/user_upload/slider_top_text.png" width="100%" /> 
</header> 
<main class="page-row page-row-expanded" > 
    <div class="container" style="margin-top:8px;">   
     <div >    
      <div style="float:left;"> 
       <f:cObject typoscriptObjectPath="lib.breadcrumb" /> 
      </div> 
      <div style="float:right;"> 
       <f:format.raw>{PRINTVIEW}</f:format.raw> 
      </div> 
     </div>  
     <div style="clear: both;padding-top:6px;"><f:format.raw>{content}</f:format.raw> 
      <div class="toTop"> 
       <a href="#top"><span class="glyphicon glyphicon-arrow-up"></span></a> 
      </div> 
      <div class="toTop2" style="width:80px;height:100px;background-color: white;"></div> 
     </div> 
    </div><!-- /.container --> 
</main> 
<footer class="page-row footer container-fluid" > 
    <div class="footer-bg" style=""> 
     <div class="container" > 
      <div class="row"> 
       <div class="col-md-12">  
        <p style="">some text</br> 
         <a href="http://localhost/typo3_src-7.6.2/index.php?id=6">Impressum</a>&nbsp&nbsp<a href="http://localhost/typo3_src-7.6.2/index.php?id=8">Sitemap</a>&nbsp&nbsp<a href="http://localhost/typo3_src-7.6.2/index.php?id=7">AGB</a> 
        </p> 
       </div> 
      </div> 
     </div> 
    </div>  
</footer> 

css

body { 
    display: table; 
    margin:0; 
    padding:0; 
    width: 100%; 
} 

.page-row { 
    display: table-row; 
} 

.page-row-expanded { 
    height: 100%; 
} 

.footer p {  
    margin-top: 20px; 
    text-align:center; 
} 

.footer-bg{  
    background-image:linear-gradient(180deg, white 10%,transparent 15%),url(http://localhost/typo3_src-7.6.2/fileadmin/user_upload/sand-181273_1920.jpg); 
    background-size:100%; 
    background-position: center; 
    background-repeat:no-repeat; 
} 

tr{ 
    vertical-align: top; 
    border-top:1px solid;  
} 

.toTop { 
    z-index: -1; 
    position: fixed; 
    bottom: 40%; left: 1%; 
} 

.toTop2 { 
    z-index: -1; 
    position: absolute; 
    bottom: 40%; left: 1%; 
} 

html, body{ 
    height:100%; /* needed for container min-height */ 
} 

th, td, caption{ 
    padding: 8px;  
} 

table{ 
    width:100%; 
} 


.element2cols { overflow:hidden;} 
.col1, .col2 { width:48%; float:left; } 
.col1 { margin-right:2%; } 
.col2 { margin-left: 2%; } 

page = PAGE 
page { 
    config { 
      metaCharset = utf-8 
      additionalHeaders = Content-Type:text/html;charset=utf-8 
      index_enable = 1 
    } 

/* Bootstrap 3 automatic responsive, do i need it ? 
     meta{ 
      name = viewport 
      content = width=device-width, initial-scale=1.0     
     } 
*/ 

    includeCSS.bootstrap = EXT:spif_distribution/Resources/Public/Bootstrap/css/bootstrap.min.css 
    includeCSS.bootstratheme = EXT:spif_distribution/Resources/Public/Bootstrap/css/bootstrap-theme.min.css 
    includeCSS.bootstrapcustom = EXT:spif_distribution/Resources/Public/Css/custom.css 

    includeJS.bootstrap = EXT:spif_distribution/Resources/Public/Bootstrap/js/bootstrap.min.js 

    10 = FLUIDTEMPLATE 
    10 { 
      file = EXT:spif_distribution/Resources/Private/Template/index.html 
      layoutRootPath = EXT:spif_distribution/Resources/Private/Layouts/ 
      partialRootPath = EXT:spif_distribution/Resources/Private/Partials/ 
      variables { 
        hallo = TEXT 
        hallo.value = HALLO WELT! 
        content < styles.content.get 

        PRINTVIEW = TEXT 
        PRINTVIEW { 
         value = Druckansicht 
         typolink.parameter.data = page:uid 
         typolink.additionalParams.insertData=1 
         typolink.additionalParams =&type=10 

        } 
      }     
    } 
} 

TypoScript Resimler

Answer 1

Benzer türde bir sorun yaşadım. Ekranı kaldır: tablo; ve göster: tablo satırı; senin CSS'den. Bu şey benim için çalıştı. Senin için de işe yarayabilir.