Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/11: Рейтинг темы: голосов - 11, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 01.06.2014
Сообщений: 6

В Bootstrap не нажимаются ссылки при уменьшении окна браузера (экрана устройства)

21.06.2015, 15:09. Показов 2082. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Тестовый домен рабочего сайта: belakb.ru
Я поменял дизайн сайта из одноколоночного представления товаров в КАТЕГОРИЯХ - в трехколоночное. После этого ВНИМАНИЕ: В категориях, в которых товар предоставлен более чем на одной странице, перестали нажиматься ссылки (кнопки) при уменьшении размера окна браузера, и соответственно при просмотре на планшетах и мобильниках. В полном окне, на PC, работает абсолютно всё, а при описанном условии, то есть, при уменьшении размера окна браузера (экрана устройства) и отображение страниц из трехколоночного переходит в двух- или одноколоночное, в КАТЕГОРИЯХ состоящих из более чем одной страницы, не нажимаются все ссылки и кнопки с товарами. Уже месяц бьюсь, не могу понять.
Интересно что, если все товары в категориях умещаются на 1 странице, то всё работает. Для примера, в категории "Продукты питания" (1 страница) работает всё при любых условиях, а в категории "Электрооборудование" (3 страницы) описанная выше проблема. Может тут баг? ПРИМЕР КОДА:
PHP/HTML
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
   print "<div class=\"col-md-12\"><h1 class=\"name-category\" align=\"center\">" . sprintf($Lang->GetString('Category &laquo;%s&raquo;'), htmlspecialchars($current_category['title']));
        if ($page_count > 1) {
            print "<small>" . sprintf($Lang->GetString('Page %d from %d'), $page, $page_count) . "</small><div class=\"clearfix\"></div>";
        }
        print "</h1></div><div class=\"col-md-12\"><div class=\"wr-btn-category-price\">";
        print "<div class=\"btn-group\">\n";
        foreach ($orders as $order_variant) {
            if ($order_variant['current']) {
                print "<a" . ($order_variant['nofollow'] ? ' rel="nofollow"' : '') . " href=\"" . htmlspecialchars($order_variant['url']) . "\" class=\"btn btn-price-category active\">" . htmlspecialchars($order_variant['title']) . "</a>\n";
            }
            else {
                print "<a" . ($order_variant['nofollow'] ? ' rel="nofollow"' : '') . " href=\"" . htmlspecialchars($order_variant['url']) . "\" class=\"btn btn-price-category\">" . htmlspecialchars($order_variant['title']) . "</a>\n";
            }
        }
        print "</div></div></div>\n";
        
        foreach ($offers as $offer_info) {
    ?>
        <div class="col-md-4 col-sm-6 col-xs-12 wr-good">
            <div class="panel panel-default">
                <div class="panel-heading name-good"><?php print htmlspecialchars($offer_info['name']); ?></div>
                <div class="panel-body text-center">
                <?php if ($offer_info['picture'] != '') { ?>
                    <p class="wr-img"><a href="<?php print htmlspecialchars($offer_info['link']); ?>"><img class="good-img" src="<?php print htmlspecialchars($offer_info['picture']); ?>"></a></p>
                <?php } ?>
                    <p class="text-left text-cat-price"><strong><?php print $Lang->GetString('Price'); ?></strong>: <span class="price-style"><?php print htmlspecialchars($offer_info['price'] . ' ' . $offer_info['currency']); ?></span></p>
                    <div class="btn-toolbar" role="toolbar">
                        <div class="btn-group">
                            <a class="btn btn-b" href="<?php print htmlspecialchars($offer_info['url']); ?>" rel="nofollow"><?php print $Lang->GetString('Buy now!'); ?></a>
                        </div>
                        <div class="wr-btn-more-info">
                            <a class="btn btn-more-info" href="<?php print htmlspecialchars($offer_info['link']); ?>"><?php print $Lang->GetString('More info'); ?></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <?php
        }
        
        if (sizeof($pages)) {
            print "<div class=\"col-md-12\"><ul class=\"pagination\">\n";
            foreach ($pages as $page_data) {
                if ($page_data['link'] != '') {
                    print "<li><a" . ($order_line != '' ? ' rel="nofollow"' : '') . " href=\"" . htmlspecialchars($page_data['link']) . "\">" . htmlspecialchars($page_data['page']) . "</a></li>\n";
                }
                else {
                    print "<li class=\"active\"><span>" . htmlspecialchars($page_data['page']) . " <span class=\"sr-only\">(current)</span></a></li>\n";
                }
            }
            print "</ul></div>\n";
        }
    }
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
21.06.2015, 15:09
Ответы с готовыми решениями:

При уменьшении экрана браузера div плавно уходит за левый край окна
Привет всем! Подскажите пожалуйста как с помощью css можно реализовать действие карусели (или просто дива), чтобы он при уменьшении...

При уменьшении экрана браузера блок уходит за левый край экрана
left 50% и margin-left:-width/2 при уменьшении экрана браузера уходит за левый край экрана. как этого избежать?

Bootstrap Подмена изображений при уменьшении экрана
Добрый день уважаемые. Подскажите пожалуйста, как реализовать при использовании бутстрапа &quot;подмену&quot; изображений на болие мелкие,...

4
Эксперт HTML/CSS
 Аватар для Shakalaka
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
21.06.2015, 15:31
Цитата Сообщение от sandal Посмотреть сообщение
print "<div class=\"col-md-12\"><ul class=\"pagination\">\n";
Вот тут для дива задать clear:left;
0
0 / 0 / 0
Регистрация: 01.06.2014
Сообщений: 6
21.06.2015, 15:51  [ТС]
Цитата Originally Posted by sandal View Post
print "<div class=\"col-md-12\"><ul class=\"pagination\">\n";
Вот тут для дива задать clear:left;

Разобрался вот в чем: я вообще убрал весь див <div class=\"col-md-12\"> и все заработало. При этом кнопки нумерации страниц чуть-чуть сдвинулись влево. При использовании Кода clear:left тоже все заработало и кнопки нумерации страниц тоже чуть-чуть сдвинулись влево.
Остался вопрос: УБРАТЬ ВЕСЬ ДИВ или задать clear:left?
0
Эксперт HTML/CSS
 Аватар для Shakalaka
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
21.06.2015, 15:57
Лучший ответ Сообщение было отмечено sandal как решение

Решение

Самый правильный вариант задать нормально класс. <div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>
0
0 / 0 / 0
Регистрация: 01.06.2014
Сообщений: 6
21.06.2015, 16:04  [ТС]
Цитата Сообщение от Shakalaka Посмотреть сообщение
Самый правильный вариант задать нормально класс. <div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>
Спасибо большое. Все получилось! При этом кнопы страниц остались там где надо. Супер!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
21.06.2015, 16:04
Помогаю со студенческими работами здесь

При уменьшении размера экрана, таблица теряется за меню (bootstrap)
Здравствуйте, помогите пожалуйста. Разбираюсь с bootstrap, хочу написать адаптивный сайт, сверху идет менюшка, прямо под ней таблица. При...

Сдвиг <div> при уменьшении размеров окна, bootstrap
Доброй ночи - начал осваивать Bootstrap и на примере одного шаблона начал изучать его. Попробовал что-то типо списка сделать. Меню сбоку...

Отступы при уменьшении окна браузера
Сделал небольшие отступы главного блока css. Можно ли чтобы при уменьшении окна эти отступы убирались. Вот сами документы ...

Адаптивность при уменьшении окна браузера
Я сверстал карточку товара, и в задании от меня требуют: · Сама карточка (прямоугольник с белым фоном) должна находиться строго...

При уменьшении окна браузера меню распадается
добрый день при уменьшение окна браузера меню распадает &lt;body&gt; &lt;div class=&quot;nav&quot;&gt; &lt;div class=&quot;head-nav&quot;&gt; ...


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

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
YAFU@home — распределённые вычисления для математики. На CPU
Programma_Boinc 20.01.2026
YAFU@home — распределённые вычисления для математики. На CPU YAFU@home — это BOINC-проект, который занимается факторизацией больших чисел и исследованием aliquot-последовательностей. Звучит. . .
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru