Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
aim777
19 / 19 / 12
Регистрация: 13.07.2014
Сообщений: 102
#1

Поместить элементы за пределами .container - HTML, CSS

31.07.2014, 21:34. Просмотров 1346. Ответов 10
Метки нет (Все метки)

Верстаю страницу с использованием bootstrap3. Как расположить стрелочки next/prev слайдера левее и правее container соответственно? Нарисовал на скриншоте эти стрелочки салатовым, чтобы было лучше видно. В верстке их пока нет. Вообще, стрелочки ради примера. Интересует, как вообще какой-либо элемент расположить левее, либо правее контейнера в bootstrap 3.

Поместить элементы за пределами .container

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
    <div class="container">
        <div class="row">
            <div class="col-xs-2 nav-icons">Авто</div>
            <div class="col-xs-2 nav-icons">Мото</div>
            <div class="col-xs-2 nav-icons">Автодома</div>
            <div class="col-xs-2 nav-icons">Ретро</div>
            <div class="col-xs-2 nav-icons">Бронь</div>
            <div class="col-xs-2 nav-icons">Автоломбард</div>
        </div>
 
        <div class="row">
            <div class="carousel slide" id="myCarousel" data-ride="carousel" data-interval="3000">
                <ol class="carousel-indicators">
                    <li class=" active" data-target="#myCarousel" data-slide-to="0"></li>
                    <li class="" data-target="#myCarousel" data-slide-to="1"></li>
                    <li class="" data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner" >
                    <div class="item active">
                        <img src="slider_img/slide1.jpg" alt="">
                        <div class="carousel-caption"><h4>Lorem ipsum dolor sit amet, consectetur adipisicing.</h4>
                        <p>Lorem ipsum dolor sit amet.</p></div>
                    </div>
                    <div class="item">
                        <img src="slider_img/slide1.jpg" alt="">
                        <div class="carousel-caption left"><h4>Lorem ipsum dolor sit amet, consectetur adipisicing.</h4>
                        <p>Lorem ipsum dolor sit amet.</p></div>
                    </div>
                    <div class="item">
                        <img src="slider_img/slide1.jpg" alt="">
                        <div class="carousel-caption"><h4>Lorem ipsum dolor sit amet, consectetur adipisicing.</h4>
                        <p>Lorem ipsum dolor sit amet.</p></div>
                    </div>
                </div>
                <a class="carousel-control left" data-slide="prev" href="#myCarousel"> &lsaquo;</a>
                <a class="carousel-control right" data-slide="next" href="#myCarousel"> &rsaquo;</a>
            </div>
        </div>
    </div>
css не прилагаю, т.к. ничего пока не трогал в нем.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
31.07.2014, 21:34
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Поместить элементы за пределами .container (HTML, CSS):

Поместить элементы горизонтально
Привет всем. Нужно сделать так, как показано на скрине. Что нужно сделать? ...

Container
Добрый день. Мне нужно сделать шаблон для страниц с помощью div'ов. Искал...

Div блок выкидывает из блока container
не пойму в чем причина, последний материнский блок (portal) не удается запихать...

Bootstrap container-fluid почему не резиновый?
Добрый день уважаемые. Подскажите, пожалуйста, почему класс container-fluid...

Не могу установить фон под container в bootstrap
Я хотел, чтобы контейнер был белой вертикальной полоской (грубо говоря), а под...

Bootstrap. Как прижать container к низу фиксированного navbar
Всех приветствую. При создании сайта с использованием Bootstrap столкнулась со...

10
vovandr
629 / 517 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
31.07.2014, 21:48 #2
Достаточно просто их спозиционировать относительно слайдера.
0
aim777
19 / 19 / 12
Регистрация: 13.07.2014
Сообщений: 102
31.07.2014, 21:54  [ТС] #3
vovandr, можно поподробнее? Т.е. поместить эти элементы внутрь слайдера и присвоить им... какие стили?
0
vovandr
629 / 517 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
31.07.2014, 21:58 #4
Лучший ответ Сообщение было отмечено aim777 как решение

Решение

Судя по коду контролы уже есть:
HTML5
1
2
<a class="carousel-control left" data-slide="prev" href="#myCarousel"> &lsaquo;</a>
<a class="carousel-control right" data-slide="next" href="#myCarousel"> &rsaquo;</a>
Достаточно их спозиционировать (скорее всего position relative у слайдера уже есть):
CSS
1
2
.left{position: absolute: left: -80px; top: 50%;}
.right{position: absolute: right: -80px; top: 50%;}
1
aim777
19 / 19 / 12
Регистрация: 13.07.2014
Сообщений: 102
31.07.2014, 22:10  [ТС] #5
Применил, не получается. Не понял, в чем проблема. Потом заметил двоеточия вместо точек с запятой) Спасибо, это помогло) Осталось только разобраться, как избежать появления горизонтального скрола и смещения стрелочек во внутрь слайдера при сжатии браузера. Я так понимаю, медиа-запросы мне тут в помощь?
0
vovandr
629 / 517 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
31.07.2014, 22:14 #6
Цитата Сообщение от aim777 Посмотреть сообщение
как избежать появления горизонтального скрола и смещения стрелочек во внутрь слайдера при сжатии браузера
Да, тут через медиа запросы подберите нужный брейкпоинт и измените расстояния left и right
Цитата Сообщение от aim777 Посмотреть сообщение
Потом заметил двоеточия вместо точек с запятой)
Да, каюсь опечатался
1
aim777
19 / 19 / 12
Регистрация: 13.07.2014
Сообщений: 102
31.07.2014, 22:19  [ТС] #7
Спасибо)
0
aim777
19 / 19 / 12
Регистрация: 13.07.2014
Сообщений: 102
02.08.2014, 02:21  [ТС] #8
Все таки не удается решить проблему до конца. При помощи media-queries удалось добиться того, чтобы при любой ширине браузера нижний скрол отсутствовал. На айфоне смотрится тоже ок (но там я и не ждал проблем, т.к. при мобильном расширении стрелочки скрываются), а вот на первом айпэде проблемы Стрелки слева и справа от карусели не влезают.

Поместить элементы за пределами .container

http://ams.modin.bget.ru/

Как так получается, что на десктопном компе проблем с адаптивностью нет ни при каком размере браузера, а на первом айпэде они появляются?
0
aim777
19 / 19 / 12
Регистрация: 13.07.2014
Сообщений: 102
02.08.2014, 14:40  [ТС] #9
Лучший ответ Сообщение было отмечено Taatshi как решение

Решение


Кто поможет, тому скидку на ламбо!))

Добавлено через 1 час 1 минуту
Все, разобрался сам) Ошибка была в самих медиа-запросах.

Надо было писать:
HTML5
1
@media all and (max-width: 1085px)
а не:
HTML5
1
@media screen and (max-width: 1085px)
Скидка на ламбо никому не достается
0
Taatshi
04.08.2014, 12:49
  #10

Не по теме:

Цитата Сообщение от aim777 Посмотреть сообщение
Скидка на ламбо никому не достается:p
Надо было дать людям выбор - я бы вот на Мазду клюнула :-/

0
aim777
04.08.2014, 19:11  [ТС]     Поместить элементы за пределами .container
  #11

Не по теме:

Либо скидка, либо выбор;D

0
04.08.2014, 19:11
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
04.08.2014, 19:11
Привет! Вот еще темы с ответами:

Bootstrap как сделать чтобы container работал в обвертке
Изучаю bootstrap, возникли вопросы, набросал я блоков http://function.vv.si/...

Хелп! Как сделать чувствительный (responsive) div container
Нужно чтобы аккордеон был всегда в одном месте (под локтем на скриншотах) и...

Container-fluid не резинит по ширине браузера при 958px и меньше
container-fluid не резинит по ширине браузера при 958px и меньше. Как эту...

Найти максимальные элементы каждой строки и поместить их на главную диагональ, а диагональные элементы поместить на место максимальных
Найти максимальные элементы каждой строки исходной матрицы А(N,N) (N&lt;=10) и...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru