Выравнивание bootstrap

@The Terry · Регистрация: 06.10.2013

Студворк — интернет-сервис помощи студентам

Доброго времени суток. Столкнулся вроде бы как с банальным вопросом. Есть сетка из трех блоков по 4 столбца на каждый. Как можно выровнять расстояние между 3-мя блоками?
Как видно на скрине, сейчас блоки гуляют...

Qwerty_Wasd · 19.09.2017, 21:07

The Terry, если я вас правильно понял, добавьте в стили этим блокам

CSS
1
text-align:center;

К примеру песочница

HTML5
1
2
3
<div class="row">
  <div class="center col-xs-4 col-sm-4 col-md-4">Контент блока 1..................................</div><div class="center col-xs-4 col-sm-4 col-md-4">Контент блока 2...</div><div class="center col-xs-4 col-sm-4 col-md-4">Контент блока 3...</div>
</div>

CSS
1
2
div{border:1px solid red;}
.center{text-align:center;}

@The Terry · 19.09.2017, 21:22 **[ТС]**

Qwerty_Wasd, не совсем то. Мой код прилагается, если конечно есть в нем смысл

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 footer-block-margin aaaa">
                    <div class="footer-about-head">
                        <h2>Ссылки</h2>
                    </div>
                    <div class="footer-links">
                        <ul class="footer-links-ul">
                            <li><a href="index.html">Главная страница</a></li>
                            <li><a href="#">Каталог запчастей</a></li>
                            <li><a href="#">Доставка до Минску и СНГ</a></li>
                            <li><a href="#">Гарантия деталей</a></li>
                            <li><a href="#">Наши контакты</a></li>
                        </ul>
                    </div>
            </div>

CSS
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
.aaaa {
    text-align: center;
}
.footer-about-head>h2 {
    margin-bottom: 20px;
    color: #FFF;
}
.footer-links-ul,
.footer-links-ul>li,
.footer-links-ul>li>a {
    text-decoration: none;
    list-style: none;
    outline: none;
    color: #909090;
    font-size: 15px;
    padding: 0;
 
    -moz-transition: color 200ms ease-out;
    -o-transition: color 200ms ease-out;
    -webkit-transition: color 200ms ease-out;
}
 
.footer-links-ul>li {
    padding-bottom: 7px;
    letter-spacing: 1px;
}

Qwerty_Wasd · 19.09.2017, 21:24

The Terry, код html вы дали не весь.

@The Terry · 19.09.2017, 21:34 **[ТС]**

Qwerty_Wasd, я понял, вот полностью футер

HTML5
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 footer-block-margin">
                <div class="footer-about">
 
                    <div class="footer-about-head">
                        <h2>MB-import</h2>
                    </div>
 
                    <div class="footer-about-describe">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis odio diam, iaculis suscipit mauris vehicula non. Phasellus viverra erat id quam consequat ultricies. In hac habitasse platea dictumst. Sed quis lacus eget magna scelerisque laoreet in et sapien. Lorem ipsum dolor sit amet,
                    </div>
                    <div class="footer-social-icon">
                        <ul class="social-icon wow fadeInUp">
                            <li><a href="#" class="fa fa-facebook"></a></li>
                            <li><a href="#" class="fa fa-instagram"></a></li>
                            <li><a href="#" class="fa fa-vk"></a></li>
                            <li><a href="#" class="fa fa-youtube-play"></a></li>
                        </ul>
                    </div>
                </div>
            </div>
 
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 footer-block-margin">
                    <div class="footer-about-head">
                        <h2>Ссылки</h2>
                    </div>
 
                    <div class="footer-links">
                        <ul class="footer-links-ul">
                            <li><a href="index.html">Главная страница</a></li>
                            <li><a href="#">Каталог запчастей</a></li>
                            <li><a href="#">Доставка до Минску и СНГ</a></li>
                            <li><a href="#">Гарантия деталей</a></li>
                            <li><a href="#">Наши контакты</a></li>
                        </ul>
                    </div>
 
            </div>
 
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 footer-block-margin">
                <div class="footer-about-head">
                    <h2>Связь с нами</h2>
                </div>
 
                <div class="footer-links">
 
                    <div class="footer-marker">
                        <i class="fa fa-map-marker" aria-hidden="true"></i>
                    </div>
                    <div class="footer-marker">
                        <i class="fa fa-phone" aria-hidden="true"></i>
                    </div>
                    <div class="footer-marker footer-marker-hover">
                        <i class="fa fa-envelope" aria-hidden="true"></i>
                    </div>
                    <div class="footer-marker footer-marker-hover">
                        <i class="fa fa-wheelchair" aria-hidden="true"></i>
                        <a href="" class="reset-links-style">Как добраться?</a>
                    </div>
 
                </div>
            </div>
        </div>
    </div>
    <div class="copywriting">
        2017
        <i class="fa fa-copyright" aria-hidden="true"></i>
        Все права защищены mb-import
    </div>
</footer>

Qwerty_Wasd · 19.09.2017, 21:56

The Terry, стили не все, но это не беда. Перейдите в песочницу =>ТЫК<= я добавил лишь border контейнерам для наглядности. Чтобы вы поняли, что ваш класс footer-block-margin там ни к чему. Поэтому двигать вам придется текст внутри блоков. Поэтому и предложил вам

CSS
1
text-align:center;

@The Terry · 20.09.2017, 05:24 **[ТС]**

Qwerty_Wasd, все равно у нас недопонимание небольшое возникло) Простите что сразу нормально не объяснил что именно нужно
Мне нужно выровнять содержание контейнеров, чтобы расстояние между было +- одинаковое для симметрии, но выравнивание самого текста внутри блока осталось по левой стороне.

p.s. footer-block-margin я добавил чтобы на маленьком экране блоки особо не слипались и были видны четкие отступы

Qwerty_Wasd · 20.09.2017, 12:35

The Terry, Теперь я вас понял. Прошу прощения, сам тупил видимо)) Тогда не

HTML5
1
col-lg-4 col-md-4

а

HTML5
1
col-lg-3 col-md-3

и

CSS
1
 margin-left

. Песочница

HTML5
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
54
55
56
57
58
59
60
61
62
63
64
65
66
<footer>
    <div class="container">
        <div class="row">
            <div class="pos col-lg-3 col-md-3 col-sm-12 col-xs-12 footer-block-margin">
                <div class="footer-about">
 
                    <div class="footer-about-head">
                        <h2>MB-import</h2>
                    </div>
 
                    <div class="footer-about-describe">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis odio diam, iaculis suscipit mauris vehicula non. Phasellus viverra erat id quam consequat ultricies. In hac habitasse platea dictumst. Sed quis lacus eget magna scelerisque laoreet in et sapien. Lorem ipsum dolor sit amet,
                    </div>
                    <div class="footer-social-icon">
                        <ul class="social-icon wow fadeInUp">
                            <li><a href="#" class="fa fa-facebook"></a></li>
                            <li><a href="#" class="fa fa-instagram"></a></li>
                            <li><a href="#" class="fa fa-vk"></a></li>
                            <li><a href="#" class="fa fa-youtube-play"></a></li>
                        </ul>
                    </div>
                </div>
            </div> 
            <div class="pos col-lg-3 col-md-3 col-sm-12 col-xs-12 footer-block-center">
                    <div class="footer-about-head">
                        <h2>Ссылки</h2>
                    </div>
 
                    <div class="footer-links">
                        <ul class="footer-links-ul">
                            <li><a href="index.html">Главная страница</a></li>
                            <li><a href="#">Каталог запчастей</a></li>
                            <li><a href="#">Доставка до Минску и СНГ</a></li>
                            <li><a href="#">Гарантия деталей</a></li>
                            <li><a href="#">Наши контакты</a></li>
                        </ul>
                    </div>
 
            </div>
 
            <div class="pos col-lg-3 col-md-3 col-sm-12 col-xs-12 footer-block-center">
                <div class="footer-about-head">
                    <h2>Связь с нами</h2>
                </div>
 
                <div class="footer-links">
 
                    <div class="footer-marker">
                        <i class="fa fa-map-marker" aria-hidden="true"> местоположение</i>
                    </div>
                    <div class="footer-marker">
                        <i class="fa fa-phone" aria-hidden="true"> позвоните нам</i>
                    </div>
                    <div class="footer-marker footer-marker-hover">
                        <i class="fa fa-envelope" aria-hidden="true"> ждем ваших писем</i>
                    </div>
                    <div class="footer-marker footer-marker-hover">
                        <i class="fa fa-wheelchair" aria-hidden="true"></i>
                        <a href="" class="reset-links-style">Как добраться?</a>
                    </div>
 
                </div>
            </div>
        </div>
    </div>    
</footer>

CSS
1
.pos{margin-left:5%;}

Добавлено через 13 минут
Также можно сделать пустые блоки нужного размера между ними. Ну что-то типа 1колонка-2колонки(контент)-1колонка-2колонки(контент)-1колонка-2колонки(контент)-1колонка

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@The Terry 1 / 1 / 0 Регистрация: 06.10.2013 Сообщений: 105

	Выравнивание bootstrap 19.09.2017, 19:55. Показов 5041. Ответов 7 Метки нет (Все метки) Доброго времени суток. Столкнулся вроде бы как с банальным вопросом. Есть сетка из трех блоков по 4 столбца на каждый. Как можно выровнять расстояние между 3-мя блоками? Как видно на скрине, сейчас блоки гуляют... 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	19.09.2017, 21:24
	The Terry, код html вы дали не весь. 0

@The Terry 1 / 1 / 0 Регистрация: 06.10.2013 Сообщений: 105
	20.09.2017, 05:24 [ТС]
	Qwerty_Wasd, все равно у нас недопонимание небольшое возникло) Простите что сразу нормально не объяснил что именно нужно Мне нужно выровнять содержание контейнеров, чтобы расстояние между было +- одинаковое для симметрии, но выравнивание самого текста внутри блока осталось по левой стороне. p.s. footer-block-margin я добавил чтобы на маленьком экране блоки особо не слипались и были видны четкие отступы 0

Выравнивание bootstrap

Решение