CSS Фиксирана позиция и медийни заявки

Имам проблем с медийни заявки и div в страничната лента с фиксирана позиция. По принцип, когато прозорецът за изглед стане твърде тесен, основното съдържание се премества наляво и след това седи под страничната лента. Опитах се да задам позиция на статична с медийните заявки, но след това не работи/не изглежда така, както искам.

Ето оригиналната цигулка: http://jsfiddle.net/ym7sQ/1/

@media (max-width: 991px) {
    #sidebar {
        position: fixed;
    }
}

Ето този със статична позиция: http://jsfiddle.net/ym7sQ/2/

@media (max-width: 991px) {
    #sidebar {
        position: static;
    }
}

Можете да видите, че страничната лента е вътре в съдържанието, но аз искам тя да покрива горната и долната част точно както е над 991px. Под 768 ще се стека, което е добре, защото няма достатъчно място за страничната лента и основното съдържание. Бихте ли ми помогнали с това, моля? Благодаря.


person Richard Mišenčík    schedule 29.11.2013    source източник


Отговори (3)


@media (max-width: 991px)
#sidebar {
position: fixed;
}

Мисля, че трябва да използвате това.

person Bipin Kumar Pal    schedule 29.11.2013
comment
позицията fixed е стойност по подразбиране, когато преоразмерите, можете да видите, че #main съдържанието се показва зад #sidebar, което не е това, което искам. Искам да си остане същото. - person Richard Mišenčík; 29.11.2013

проверете го на http://jsfiddle.net/ym7sQ/14/show

Източник: http://jsfiddle.net/ym7sQ/14/

Много съжалявам за промяната. Но основното изменение е да преместите целия #sidebar елемент извън контейнера.

HTML:

<div id="top">
    <div class="container">
        <div class="row">
            <div class="col-md-9 col-md-push-3">
                 <h2>Home</h2>
            </div>
        </div>
    </div>
</div>
<div id="sidebar" class="col-sm-3"><a href="/bg#" class="logo"></a>
    <nav role="navigation">
        <ul>
            <li class="active"><a href="/bg#">Home</a></li>
            <li><a href="/bg#">Item 1</a></li>
            <li><a href="/bg#">Item 2</a></li>
            <li><a href="/bg#">Item 3</a></li>
        </ul>
    </nav>
    <hr />
    <p>[email protected]
        <br />123 456 789</p>
    <p>Something something</p>
</div>
<div id="content">
    <div class="container">
        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-9">
                <section id="main">
                    <div id="slider" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#slider" data-slide-to="0" class="active"></li>
                            <li data-target="#slider" data-slide-to="1"></li>
                            <li data-target="#slider" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item active">
                                <img src="http://placekitten.com/1280/720" alt="Slide 1" />
                            </div>
                            <div class="item">
                                <img src="http://placekitten.com/1280/720g" alt="Slide 2" />
                            </div>
                            <div class="item">
                                <img src="http://placekitten.com/1280/720" alt="Slide 3" />
                            </div>
                        </div> <a class="left carousel-control" href="/bg#slider" data-slide="prev">

                            </a>
 <a class="right carousel-control" href="/bg#slider" data-slide="next">

                            </a>

                    </div>
                    <div class="main-bottom">
                        <img src="http://placekitten.com/300/300" alt="Image" /> <a href="/bgcontact.html">
                            <img src="http://placekitten.com/100/100" alt="France" />
                            </a>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>
<div id="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-9 col-md-push-3">
                <p>2013 &copy; All rights reserved.</p>
            </div>
        </div>
    </div>
</div>
person Tom Chung    schedule 29.11.2013
comment
но след това е заседнал от лявата страна през цялото време, бих искал уебсайтът да е центриран, ако е възможно. - person Richard Mišenčík; 29.11.2013
comment
Мисля, че е същият като преди. - person Richard Mišenčík; 29.11.2013

Страничната лента се припокрива с основното съдържание, защото елементът .logo има фиксирана ширина (150px) и фиксирано ляво/дясно поле (и двете по 40px), така че цялата ширина на елемента .logo е 230px, което е по-голямо от ширината на елемента #sidebar, когато страницата е достатъчно тясна, така че елементът #sidebar е разширен.

Решение:
направете ширината на елемента .logo динамична, като:

.logo { ширина: 80%; поле: 40px автоматично 70px; }

Тогава може да се наложи да използвате маркер <img>, за да покажете логото, вместо да използвате фон.

person Jing    schedule 29.11.2013
comment
Не мисля, че проблемът е само в елемента .logo. Трябва да опитате да промените размера на прозореца. - person Tom Chung; 29.11.2013
comment
@Jing .logo не е проблемът, можете да премахнете маржа и widht,height, но все пак #main съдържанието с изображения ще бъде преместено под страничната лента - person Richard Mišenčík; 29.11.2013
comment
@TomChung Точно така, имате ли идея за поправка? - person Richard Mišenčík; 29.11.2013
comment
Може да е полезно, вижте списъка с отговори - person Tom Chung; 29.11.2013
comment
@Richard, опитай това: поддържай позицията на #sidebar фиксирана, добавете клас col-xs-3 за div контейнера на #sidebar и добавете col-xs-9 за контейнера на #main - person Jing; 29.11.2013
comment
@Jing Но искам съдържанието да се подрежда на по-малки устройства, така че. И когато използвам col-sm-*, тогава той просто се показва зад страничната лента. Просто ще използвам position: static при, да кажем, под 600px, когато е твърде малко, но над това бих искал да остане същото. - person Richard Mišenčík; 29.11.2013
comment
jsfiddle.net/ym7sQ/16, промяна на максималната ширина на медийната заявка от 991 на 768, това ли е какво искаш? - person Jing; 29.11.2013
comment
@Jing Искам да е подреден само на мобилни устройства, но при 768px все пак трябва да работи хоризонтално. Като това: jsfiddle.net/ym7sQ/17. Основното съдържание може да бъде по-малко, но не знам защо става по-голямо - person Richard Mišenčík; 29.11.2013
comment
Мисля, че това е така, защото класът col-ms-x спира да работи, когато ширината на страницата е по-малка от 768px, вместо това трябва да използвате col-xs-x. Bootstrap обаче не поддържа по-малки разделения под 768px, така че може да се наложи да напишете своя собствена медийна заявка, за да направите 480px като друг праг. - person Jing; 29.11.2013
comment
@Jing О, добре, тогава да кажем, че това е последният: jsfiddle.net/ym7sQ/18 Сега как мога да направя така, че страничната лента да бъде подредена отгоре при максимална ширина: 480px? В момента използвам позиция: статична; но това не работи. Благодаря ти - person Richard Mišenčík; 29.11.2013
comment
проверете това: jsfiddle.net/ym7sQ/19, замествам стила col-xs-x в медийна заявка за max-width:480px. Ако не искате да промените стила на col-xs-x, можете да добавите свой собствен клас за #sidebar и #main контейнер div. - person Jing; 30.11.2013