Question

我在使用owl_slider扩展（2.3.3通过TER在typo3 7.6.2上的TER）上工作正常。我设法让滑块工作但是当我将浏览器宽度更改为低于768像素时，我的页眉和页脚图像显示得太大而且内容（滑块，文本等）不再适合内容区域（引导容器））。当我在页面上没有滑块时，调整大小可以正常工作。

当我检查猫头鹰滑块项目时，我可以看到宽度随着我的浏览器宽度而变化，低于768它会计算奇怪的值（附加的屏幕，这应该是不能正确显示的原因）。有什么想法吗？

编辑：刚尝试了一个只有{content}的模板，滑块没有功能，然后我把它放在一个容器里就可以了。为什么会出现这种情况？

模板：

<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%; }

的TypoScript

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

                    }
            }                
    }   
}

图片

Answer 1

我有类似的问题。删除display：table;并显示：table-row;来自你的CSS。这件事对我有用。它也可能适合你。

猫头鹰滑块不能在768像素宽度以下工作

1 个答案: