Bootstrap сетка - SEO форум MaulTalk.com

Сообщение сайта

(Сообщение закроется через 3 секунды)

Здравствуйте, гость (

| Вход | Регистрация )

SEO форум MaulTalk.com > Веб-строительство > Программная часть

Bootstrap сетка, как организовать

Опции

iodjin

Topic Starter сообщение

13.9.2014, 23:09; Ответить: iodjin

Сообщение #1

Завсегдатай

Группа: Active User
Сообщений: 785
Регистрация: 19.8.2012
Поблагодарили: 204 раза
Репутация:

Приветствую.
Прошу помощи.
Есть страница с 1 контейнером по середине.
Код:

Код

<html>
<head>
    <title>Страница</title>
    <link href="bootstrap.min.css" rel="stylesheet" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
    <style type="text/css">
     h1, body{
         font-family: 'Roboto', 'sans-serif';
     }
    </style>
</head>
<body>
<div class="container" align="center" style="margin-top:100px;">
    <a href="/" title="Страница"><img src="img/spb.jpg"></a>
<h1>Строительные работы<br> в Санкт-Петербурге</h1>
<p><a href="mailto:info@spb.ru">info@spb.ru</a></p>
<small>© 2014 ООО "Страница"</small>
</div>
</body>
</html>

Все это просто располагается по середине.

Мне нужно сделать по 3 картинки по бокам относительно центра, оставив данную вещь(существующий контейнер) в центре.

Т.е по сути реализовать такую схему

Сделал так, но что-то меня не очень радует реализация.

Код

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Страница</title>
    <link href="http://proms-spb.ru/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="./Спб_files/css" rel="stylesheet" type="text/css">
    <style type="text/css">
     h1, body{
         font-family: 'Roboto', 'sans-serif';
     }

     .block{
     padding-top:50px;
     }
    </style>
<style type="text/css"></style><style>.NoIndex_clr_bg_txt_and_img, .NoIndex_clr_bg_txt_and_img * { color: rgb(0, 0, 0) !important; background-color: #DAA520 !important;} .NoIndex_cross_txt, .NoIndex_cross_txt * { text-decoration: line-through !important; } </style></head>
<body>

<div class="container" align="center" style="margin-top:50px;">
    <div class="row">
        <div class="col-md-4"><img src="img/1.jpg" class="img-circle img-responsive" width="250" height="150"></a></div>
        <div class="col-md-4">
                <a href="./Спб_files/Спб.htm" title="СПб"><img src="./Спб_files/spb.jpg"></a>
            </div>
        <div class="col-md-4"><img src="img/2.jpg" class="img-circle img-responsive" width="250" height="150"></a></div>
    </div>

    <div class="row">
        <div class="col-md-4 "><img src="img/3.png" class="img-circle img-responsive" width="250" height="150"></a></div>
            <div class="col-md-4 "><h1>Строительные работы<br> в Санкт-Петербурге</h1></div>
        <div class="col-md-4"><img src="img/5.jpg" class="img-circle img-responsive" width="250" height="150"></a></div>
    </div>

    <div class="row">
        <div class="col-md-4 block"><img src="img/6.jpg" class="img-circle img-responsive" width="250" height="150"></a></div>
                <div class="col-md-4">
                <p><a href="mailto:info@spb.ru">info@spb.ru</a></p>
                <small>© 2014 ООО "Страница"</small>
                </div>
        <div class="col-md-4 block"><img src="img/7.jpg" class="img-circle img-responsive" width="250" height="150"></a></div>
    </div>

</div>

</body></html>

Подскажите, пожалуйста, правильный вариант, если он есть.

Сообщение отредактировал iodjin - 13.9.2014, 23:12

--------------------

SEO услуги

Ответить с цитированием данного сообщения

Sanasol Sanasol 14.9.2014, 0:20; Сообщений: 111 Поблагодарили: 47 раз Репутация: 6 Просмотр профиля	14.9.2014, 0:20; Ответить: Sanasol Сообщение #2
Участник Группа: User Сообщений: 111 Регистрация: 9.7.2013 Из: Санкт-Петербург Поблагодарили: 47 раз Репутация: 6	https://gist.github.com/S-anasol/cf74471c8add6a327b7c https://gist.github.com/S-anasol/e6d4b514e9cdb328d040 Поблагодарили: (1) iodjin

iodjin

Topic Starter сообщение

14.9.2014, 11:03; Ответить: iodjin

Сообщение #3

Завсегдатай

Группа: Active User
Сообщений: 785
Регистрация: 19.8.2012
Поблагодарили: 204 раза
Репутация:

Цитата(Sanasol @ 14.9.2014, 0:20)

https://gist.github.com/S-anasol/cf74471c8add6a327b7c

https://gist.github.com/S-anasol/e6d4b514e9cdb328d040

Спасибо.
Только:
1) чем отличаются 2 ваших кода? Посмотрел, вроде ничем.
2) у меня разве не так вышло?
и 3) как отступы сделать между рядами, а то я padding-top использовал

Спасибо Sanasol, очень помог.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

--------------------

SEO услуги

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Автор	Просмотров	Последний ответ
Сетка сайтов - Каталоги компаний Сетка сайтов - Каталоги компаний	faqbill	554	7.10.2021, 12:34 автор: faqbill
PBN Ссылки под БУРЖ (с главных страниц и статей). Личная сетка \| Тематичное соседство	PBN_Links_Sale	840	12.7.2021, 11:20 автор: PBN_Links_Sale
Clickgate - FX/CRYPTO сетка	Andreyc90	1858	16.4.2021, 20:57 автор: Andreyc90
Web-разработка (C++/PHP/SQL/JS/Bootstrap). HighLoad проекты.	DF™	965	28.7.2020, 13:24 автор: DF™
Рекламная сетка MobBob Лучший источник проверенного трафика	АлиБоб	696	7.4.2020, 19:59 автор: АлиБоб

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

Текстовая версия

Сейчас: 19.10.2021, 5:39

Дизайн