Прокрутка картинок пальцем, Bootstrap

@гуня · Регистрация: 21.08.2009

Студворк — интернет-сервис помощи студентам

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
<div class="row">
            <div class="col-lg-4">
                <h2>Heading</h2>
 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                    fugiat nulla pariatur.</p>
 
                <p><a class="btn btn-default" href="http://www.yiiframework.com/doc/">Yii Documentation &raquo;</a></p>
            </div>
            <div class="col-lg-4">
                <h2>Heading</h2>
 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                    fugiat nulla pariatur.</p>
 
                <p><a class="btn btn-default" href="http://www.yiiframework.com/forum/">Yii Forum &raquo;</a></p>
            </div>
            <div class="col-lg-4">
                <h2>Heading</h2>
 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                    fugiat nulla pariatur.</p>
 
                <p><a class="btn btn-default" href="http://www.yiiframework.com/extensions/">Yii Extensions &raquo;</a></p>
            </div>
        </div>

счас код выводится на десктопе горизонтально а на мобиле в столбик
как вывести код горизонтально для мобильных с прокруткой пальцем вправо\влево?

@Kenworth · 22.11.2016, 15:06

Не понятно что должно происходить в вашем коде, т.к Вы не выложили css стили и желаемый результат в скринах, то есть такое свойство overflow.
Если это какая то карусель - то лучше использовать соответствующие плагины типа swiper, owlcarousel и т.д

@гуня · 22.11.2016, 15:28 **[ТС]**

стили стандартные бустраповские
вот как счас работает
я хочу чтобы в мобильном дивы не отображались в столбик, а пальцем прокручивались вправо\влево по одному
как я понял в бустрапе нету штатных механизмов? и нужно использовать сторонние библиотеки например http://idangero.us/swiper/demos/

@Kenworth · 22.11.2016, 16:13

Я думаю будет понятен пример.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@media (min-width: 320px) and (max-width: 479px){
    .row{
         white-space: nowrap;
         owerflow: hidden;
         
    }
    .row .col-lg-4{
        width: 100%;
        max-width: 300px;
        padding: 20px;
        height: auto;
        display: inline-block;
        white-space: normal;
    }
}

PS. В примере я привязался к классам фреймворка, но так делать нельзя. Задай свои классы и привязывайся к ним

@гуня · 22.11.2016, 17:13 **[ТС]**

применил стили но фигня получается, прокручивается вся страница а не нужная область
вот код страницы и стили

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-param" content="_csrf">
    <meta name="csrf-token" content="QzJqRUdOYjl7fD0cAg07VQAEPBQEKw1vKmMlBhN5V1IaZlw1EDYPFA==">
    <title>My Yii Application</title>
    <link href="/assets/f829a3d0/css/bootstrap.css" rel="stylesheet">
<link href="/css/site.css" rel="stylesheet"></head>
<body>
 
<div class="wrap">
    <nav id="w0" class="navbar-inverse navbar-fixed-top navbar" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w0-collapse"><span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span></button><a class="navbar-brand" href="/index.php">My Company</a></div><div id="w0-collapse" class="collapse navbar-collapse"><ul id="w1" class="navbar-nav navbar-right nav"><li class="active"><a href="/index.php?r=site%2Findex">Home</a></li>
<li><a href="/index.php?r=site%2Flogin">Login</a></li></ul></div></div></nav>
    <div class="container">
                <div class="site-index">
 
    <div class="jumbotron">
        <h1>Congratulations!</h1>
 
        <p class="lead">You have successfully created your Yii-powered application.</p>
 
        <p><a class="btn btn-lg btn-success" href="http://www.yiiframework.com">Get started with Yii</a></p>
    </div>
 
    <div class="body-content">
 
        <div class="row row1">
            <div class="col-lg-4 row11">
                <h2>Heading</h2>
 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                    fugiat nulla pariatur.</p>
 
                <p><a class="btn btn-default" href="http://www.yiiframework.com/doc/">Yii Documentation &raquo;</a></p>
            </div>
            <div class="col-lg-4 row11">
                <h2>Heading</h2>
 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                    fugiat nulla pariatur.</p>
 
                <p><a class="btn btn-default" href="http://www.yiiframework.com/forum/">Yii Forum &raquo;</a></p>
            </div>
            <div class="col-lg-4 row11">
                <h2>Heading</h2>
 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                    fugiat nulla pariatur.</p>
 
                <p><a class="btn btn-default" href="http://www.yiiframework.com/extensions/">Yii Extensions &raquo;</a></p>
            </div>
        </div>
 
    </div>
</div>
    </div>
</div>
 
<footer class="footer">
    <div class="container">
        <p class="pull-left">&copy; My Company 2016</p>
 
        <p class="pull-right">Powered by <a href="http://www.yiiframework.com/" rel="external">Yii Framework</a></p>
    </div>
</footer>
 
<script src="/assets/1bff0212/jquery.js"></script>
<script src="/assets/9dcd0fae/yii.js"></script>
<script src="/assets/f829a3d0/js/bootstrap.js"></script></body>
</html>

CSS
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
html,
body {
    height: 100%;
}
 
.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}
 
.wrap > .container {
    padding: 70px 15px 20px;
}
 
.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}
 
.jumbotron {
    text-align: center;
    background-color: transparent;
}
 
.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}
 
.not-set {
    color: #c55;
    font-style: italic;
}
 
/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}
 
a.asc:after {
    content: /*"\e113"*/ "\e151";
}
 
a.desc:after {
    content: /*"\e114"*/ "\e152";
}
 
.sort-numerical a.asc:after {
    content: "\e153";
}
 
.sort-numerical a.desc:after {
    content: "\e154";
}
 
.sort-ordinal a.asc:after {
    content: "\e155";
}
 
.sort-ordinal a.desc:after {
    content: "\e156";
}
 
.grid-view th {
    white-space: nowrap;
}
 
.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}
 
.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}
 
@media (min-width: 320px) and (max-width: 479px){
    .row1{
         white-space: nowrap;
         owerflow: hidden;
         
    }
    .row1 .row11{
        width: 100%;
        max-width: 300px;
        padding: 20px;
        height: auto;
        display: inline-block;
        white-space: normal;
    }
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@Kenworth 105 / 104 / 59 Регистрация: 21.10.2013 Сообщений: 346
	22.11.2016, 15:06
	Не понятно что должно происходить в вашем коде, т.к Вы не выложили css стили и желаемый результат в скринах, то есть такое свойство overflow. Если это какая то карусель - то лучше использовать соответствующие плагины типа swiper, owlcarousel и т.д 0

@гуня 2 / 2 / 1 Регистрация: 21.08.2009 Сообщений: 134
	22.11.2016, 15:28 [ТС]
	стили стандартные бустраповские вот как счас работает я хочу чтобы в мобильном дивы не отображались в столбик, а пальцем прокручивались вправо\влево по одному как я понял в бустрапе нету штатных механизмов? и нужно использовать сторонние библиотеки например http://idangero.us/swiper/demos/ Миниатюры 0