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



 

Здравствуйте, гость ( Вход | Регистрация )

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


Завсегдатай
*****

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


Приветствую.
Прошу помощи.
Есть страница с 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


Участник
***

Группа: 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
Сообщений: 694
Регистрация: 19.8.2012
Поблагодарили: 202 раза
Репутация:   27  


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

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

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

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


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Продажа адалт ссылок (старая и молодая сетка) 60 сайтов.
3 bratoz 899 24.5.2018, 19:11
автор: bratoz
Открытая тема (нет новых ответов) ICOanimals - новая партнерская сетка по ICO офферам
13 ICOanimals 2130 23.4.2018, 13:13
автор: ICOanimals
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыИзменить шаблон, сместить элементы bootstrap
1 Nemo 505 16.4.2018, 23:30
автор: gruz333
Открытая тема (нет новых ответов) Ишем верстальшика - bootstrap
с опытом работы в bootstrap
16 AWARO 1650 30.3.2018, 11:52
автор: Prytkov_Aleksandr
Открытая тема (нет новых ответов) Недорогие услуги - php/js/mysql/jquery/bootstrap
2 vlads 1049 25.12.2017, 21:18
автор: xetedata


 



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