簡體   English   中英

是否可以不將標語對准身體?

[英]Is it possible to not target the banner in the body?

我遇到了一個問題。我希望橫幅隨着瀏覽器的擴展而增加尺寸,但不能容納正文的內容。 因此,我決定不允許正文內容擴展,我將執行以下媒體查詢:

   @media (min-width:1281px){
    #homepage .carousel .carousel-caption { 
        left:auto;
        right:auto;
        max-width:1263px;
        margin-left:70px;
    }
    /*.footer-links{
        margin:auto;
        max-width:1263px;
    }
    .bodyPages{
        margin:auto !important;
        max-width:1263px !important;
    }
    #searchForm{
        margin:auto !important;
        max-width:1263px !important;
    }
    }*/
    /*.content-wrapper{
        margin:auto;
        max-width:1263px !important;
    }
    .carousel-wrapper{
        max-width:100%;
    }*/
    body{
        max-width:1263px !important;
        margin:auto;
    }
    :not(.carousel-inner img){

    }
    .carousel-inner img {
      height: auto;
      width: 100%;
    }
}

更新2:

<cfoutput>
<cfinclude template="inc/html_head.cfm" />
<body id="#$.getTopID()#" class="#$.createCSSHook($.content('menuTitle'))#" data-spy="scroll" data-target=".subnav" data-offset="50">
    <!--- <cfinclude template="inc/navbar.cfm" /> --->
    <!--- Navbar's display below is set to absolute position --->
    <cfinclude template="inc/navbar_ap.cfm" />
    <div id="resizable-section">
        <!---
            The Carousel/Slideshow
            Refer to the theme's contentRenderer.cfc for details on this method and its arguments/options
            NOTES: 
                * This theme is designed for Mura 6.1+
                * Only content items with an 'Associated Image' will be rendered
                * You can control the crop of the carousel image by using the custom defined 'carouselimage' image size // 'carouselimage'
        --->
        <!--- #$.dspCarouselByFeedName(
            feedName='Slideshow'
            , showCaption=true
            , cssID='myCarousel'
            , size='carouselimage'
            , interval=5000
            , autoStart=true
        )# --->
            #$.dspCarouselByFeedName(
            feedName='Slideshow'
            , showCaption=true
            , cssID='myCarousel'
            , size='custom'
            , interval=10000
            , autoStart=true
        )#
            <div class="container-fluid bodyPages">
                <div class="row">
                        <!-- expanded width of the following section. -->
                        <!--<section class="col-lg-8 col-md-8 col-sm-12 col-xs-12 content">-->
                        <section class="col-lg-offset-1 col-lg-10 col-md-12 col-sm-12 col-xs-12 content" id="home-content">
                        <!--- The content --->
                            #$.dspBody(
                                body=$.content('body')
                                , pageTitle=''
                                , crumbList=false
                                , showMetaImage=false
                            )#
                            <!--- Display Objects assigned to display region 2 (Main Content) --->
                            #$.dspObjects(2)#
                        </section>
                            <aside class="col-lg-3 col-md-4 col-sm-12 col-xs-12">-->
                            <!--- Display Objects assigned to display region 3 (Right Column) --->
                            <!--#$.dspObjects(3)#-->
                        <!--</aside>-->
                </div><!--- /.row --->
                <cfinclude template="inc/footer.cfm" />
            </div><!-- /.container -->
    </div><!-- /.resizable-text -->
<cfinclude template="inc/html_foot.cfm" />

我相信您遇到的問題是因為您要為整個身體設置最大寬度,並且橫幅位於身體內。 這意味着您的橫幅廣告永遠不能大於您指定的1263px最大寬度。

無需更改整個身體的大小,而是需要為內容創建包裝。 您還需要為橫幅創建包裝。

這是一些HTML:

<body>

<div class="banner">
    Banner Content goes here
</div>


<div class="content-wrapper">
    Page content goes here
</div>


</body>

和一些CSS:

body {width:100%;}

.content-wrapper {
    max-width:1263px;
}

.banner-wrapper {
    width:100%;
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM