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



 

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

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

Открыть тему
Тема закрыта
> Bootstrap сетка, как организовать
iodjin
iodjin
Topic Starter сообщение 13.9.2014, 23:09; Ответить: iodjin
Сообщение #1


Приветствую.
Прошу помощи.
Есть страница с 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 картинки по бокам относительно центра, оставив данную вещь(существующий контейнер) в центре.

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


Сделал так, но что-то меня не очень радует реализация.
Код
<!-- saved from url=(0020)http://proms-spb.ru/ -->
<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


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Sanasol
Sanasol
сообщение 14.9.2014, 0:20; Ответить: Sanasol
Сообщение #2


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


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

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

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

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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

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


 



RSS Текстовая версия Сейчас: 28.3.2024, 19:43
Дизайн