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



 

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

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


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

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


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

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

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


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Ишем верстальшика - bootstrap
с опытом работы в bootstrap
13 AWARO 977 3.11.2017, 22:07
автор: vadosseo
Открытая тема (нет новых ответов) Bootstrap 4 SASS компиляция ошибки в _root.scss?
3 mxxx 585 3.11.2017, 15:57
автор: mmkulikov
Открытая тема (нет новых ответов) Недорогие услуги - php/js/mysql/jquery/bootstrap
1 vlads 628 21.3.2017, 18:08
автор: unnell
Открытая тема (нет новых ответов) Верстка Bootstrap
0 RiKo 583 10.9.2016, 8:08
автор: RiKo
Открытая тема (нет новых ответов) Ищу верстальщика со знанием Bootstrap
Для выполнения верстки с адаптивностью
0 andreykashops 674 5.12.2015, 21:48
автор: andreykashops


 



RSS Текстовая версия Сейчас: 11.12.2017, 15:56
Дизайн