Размещение кнопок с Bootstrap

@Nikel41 · Регистрация: 04.06.2017

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

Добрый день, форумчане!
Прошу подсказки в освоении Bootstrap, вероятно не понимаю основного принципа работы.
Стоит большая задача, но начал с простого примера, хочу сделать 2 кнопки стабильной ширины в 8 колонок Bootstrap ровно по центру экрана на устройствах любого размера.
Код следующий:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet">  
</head>
<body>
 
<form class="my_buttons">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2 col-md-8 col-md-offset-2">
            <button formaction="https://www.yandex.ru/"> Ссылка на Яндекс </button><br>
            <button formaction="https://www.rambler.ru/"> Ссылка на Рамблер </button>
        </div>
    </div>
</form>
 
</body>
</html>

Полученные кнопки упорно не хотят занимать свою позицию, хотя казалось бы, что колонка шириной в 8 столбцов и отступом в 2 столбца должна явно указывать на размер формы.
Прошу помощи, надеюсь, что решение этой задачи поможет в понимании вопроса в целом и дальнейшем самостоятельном решении в более масштабных пропорциях...
Спасибо!

@mrtoxas · 06.06.2017, 10:42

HTML5
1
2
3
 <div class="col-xs-8 col-xs-offset-2 text-center">
    <!-- ... -->
 </div>

@Nikel41 · 07.06.2017, 22:15 **[ТС]**

Спасибо большое за подсказку!
Пошел дальше, несколько продвинулся, задача стоит примерно такая, как на рисунке во вложении или на хостинге https://ibb.co/hga35v
од написан следующий:
index.php

PHP
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="ru-RU">
<html>
<head>
<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sokolov.ru</title>
    <link href="/css/bootstrap.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet" type="text/css">   
</head>
<body>
 
<div class="logo_switch">
    <div class="row">
        <div class="col-xs-4">
        <img src="logo_vert.png" style="width: 100%">
        </div>
 
        <div class="col-xs-2 col-xs-offset-6">
        <a id="rus" href="index.php?lang=ru" style="color:<?php echo "$ru_color";?>">РУ</a>
        <a href="index.php?lang=en" style="color:<?php echo "$en_color";?>">ENG</a>
        </div>
    </div>
</div>
 
<form class="all_active_elements"> 
 
<div class="Header_Plus_tip">
    <div class="row">
        <div class="col-xs-8">
            Для доступа в ИНТЕРНЕТ необходимо пройти идентификацию
        </div>
 
        <div class="col-xs-2 col-xs-offset-2">
            <input type="checkbox" id="tip_1" class="tip-checkbox">
                <label for="tip_1">
                    <img src="q_mark.png" alt="tip_1" style="width: 100%">
                </label>
 
                <span class="tip">
                    Подсказка номер один.
                    <label for="tip_1" class="tip-close">X</label>
                </span>
        </div>      
    </div>  
</div>
 
<div class="Big_checkbox">
    <div class="row">
        <div class="col-xs-10 col-offset-1">
            <input type="checkbox" class="Big_checkbox">
            <label for="Big_checkbox">Я прочитал и согласен с условиями <a href="#"><ins>пользовательского соглашения</ins></a></label>
        </div>
    </div>
</div>
 
<div class="Buttons_Plus_tips">
    <div class="row">
        <div class="col-xs-10 col-xs-offset-1">
            <div class="col-xs-8">
                <button type="button" class="btn btn-primary btn-block">С помощью СМС</button>
            </div>
 
            <div class="col-xs-2 col-xs-offset-2">
            <input type="checkbox" id="tip_2" class="tip-checkbox">
                <label for="tip_2">
                    <img src="q_mark.png" alt="tip_2" style="width: 100%">
                </label>
 
                <span class="tip">
                    Подсказка номер два.
                    <label for="tip_2" class="tip-close">X</label>
                </span>
            </div>
 
            <div class="col-xs-8">
                <button type="button" class="btn btn-primary btn-block">Через Госуслуги</button>
            </div>
 
            <div class="col-xs-2 col-xs-offset-2">
            <input type="checkbox" id="tip_3" class="tip-checkbox">
                <label for="tip_3">
                    <img src="q_mark.png" alt="tip_3" style="width: 100%">
                </label>
 
                <span class="tip">
                    Подсказка номер три.
                    <label for="tip_3" class="tip-close">X</label>
                </span>
            </div>
 
            <div class="col-xs-8">
                <button type="button" class="btn btn-primary btn-block">Бесплатным звонком</button>
            </div>
 
            <div class="col-xs-2 col-xs-offset-2">
            <input type="checkbox" id="tip_4" class="tip-checkbox">
                <label for="tip_4">
                    <img src="q_mark.png" alt="tip_4" style="width: 100%">
                </label>
 
                <span class="tip">
                    Подсказка номер четыре.
                    <label for="tip_4" class="tip-close">X</label>
                </span>
            </div>
 
        </div>
    </div>
 
</div>
 
</form>
</body>
</html>

style.css

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
#rus {
    border-right: 1px solid black;
    padding-right: 4px;
}
 
.logo_switch{
    margin-right: 7%;
    margin-top: 4%;
    margin-left: 7%;
}
 
.tip-checkbox{
    display: none;
}
 
.tip{
    display: none;
}
 
#tip_1:checked ~ .tip {
  display: block;
}
 
#tip_2:checked ~ .tip {
  display: block;
}
 
#tip_3:checked ~ .tip {
  display: block;
}
 
#tip_4:checked ~ .tip {
  display: block;
}
 
.Header_Plus_tip{
    margin-top: 10%;
    margin-bottom: 10%;
    margin-right: 7%;
    margin-left: 7%;
}
 
.Big_checkbox{
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 4%;
}

Выходит все равно какая-то кривь..(
Может я не очень логично разбил строки и колонки? Центрирование текста по вертикали тоже не совсем понятно как правильно сделать.
Подскажите пожалуйста.
Спасибо!

@Nikel41 · 07.06.2017, 22:50 **[ТС]**

Залил результат вот на фиддл, полагаю так удобнее:
https://jsfiddle.net/e3ea7854/
Буду благодарен за любые советы и рекомендации.

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<body>
 
<div class="logo_switch">
    <div class="row">
        <div class="col-xs-4">
        <img src="http://www.maryville.edu/marketing/files/2016/09/maryville-horizontal-logo.jpg" style="width: 100%">
        </div>
 
        <div class="col-xs-2 col-xs-offset-6">
        <a id="rus" href="index.php?lang=ru">РУ</a>
        <a href="index.php?lang=en">ENG</a>
        </div>
    </div>
</div>
 
<form class="all_active_elements"> 
 
<div class="Header_Plus_tip">
    <div class="row">
        <div class="col-xs-8">
            Для доступа в ИНТЕРНЕТ необходимо пройти идентификацию
        </div>
 
        <div class="col-xs-2 col-xs-offset-2">
            <input type="checkbox" id="tip_1" class="tip-checkbox">
                <label for="tip_1">
                    <img src="http://freevector.co/wp-content/uploads/2013/11/25400-question-mark-on-a-circular-black-background1.png" alt="tip_1" style="width: 100%">
                </label>
 
                <span class="tip">
                    Подсказка номер один.
                    <label for="tip_1" class="tip-close">X</label>
                </span>
        </div>      
    </div>  
</div>
 
<div class="Big_checkbox">
    <div class="row">
        <div class="col-xs-10 col-offset-1">
            <input type="checkbox" class="Big_checkbox">
            <label for="Big_checkbox">Я прочитал и согласен с условиями <a href="#"><ins>пользовательского соглашения</ins></a></label>
        </div>
    </div>
</div>
 
<div class="Buttons_Plus_tips">
    <div class="row">
        <div class="col-xs-10 col-xs-offset-1">
            <div class="col-xs-8">
                <button type="button" class="btn btn-primary btn-block">С помощью СМС</button>
            </div>
 
            <div class="col-xs-2 col-xs-offset-2">
            <input type="checkbox" id="tip_2" class="tip-checkbox">
                <label for="tip_2">
                    <img src="http://freevector.co/wp-content/uploads/2013/11/25400-question-mark-on-a-circular-black-background1.png" alt="tip_2" style="width: 100%">
                </label>
 
                <span class="tip">
                    Подсказка номер два.
                    <label for="tip_2" class="tip-close">X</label>
                </span>
            </div>
 
            <div class="col-xs-8">
                <button type="button" class="btn btn-primary btn-block">Через Госуслуги</button>
            </div>
 
            <div class="col-xs-2 col-xs-offset-2">
            <input type="checkbox" id="tip_3" class="tip-checkbox">
                <label for="tip_3">
                    <img src="http://freevector.co/wp-content/uploads/2013/11/25400-question-mark-on-a-circular-black-background1.png" alt="tip_3" style="width: 100%">
                </label>
 
                <span class="tip">
                    Подсказка номер три.
                    <label for="tip_3" class="tip-close">X</label>
                </span>
            </div>
 
            <div class="col-xs-8">
                <button type="button" class="btn btn-primary btn-block">Бесплатным звонком</button>
            </div>
 
            <div class="col-xs-2 col-xs-offset-2">
            <input type="checkbox" id="tip_4" class="tip-checkbox">
                <label for="tip_4">
                    <img src="http://freevector.co/wp-content/uploads/2013/11/25400-question-mark-on-a-circular-black-background1.png" alt="tip_4" style="width: 100%">
                </label>
 
                <span class="tip">
                    Подсказка номер четыре.
                    <label for="tip_4" class="tip-close">X</label>
                </span>
            </div>
 
        </div>
    </div>
 
</div>
 
</form>
</body>

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
#rus {
    border-right: 1px solid black;
    padding-right: 4px;
}
 
.logo_switch{
    margin-right: 7%;
    margin-top: 4%;
    margin-left: 7%;
}
 
.tip-checkbox{
    display: none;
}
 
.tip{
    display: none;
}
 
#tip_1:checked ~ .tip {
  display: block;
}
 
#tip_2:checked ~ .tip {
  display: block;
}
 
#tip_3:checked ~ .tip {
  display: block;
}
 
#tip_4:checked ~ .tip {
  display: block;
}
 
.Header_Plus_tip{
    margin-top: 10%;
    margin-bottom: 10%;
    margin-right: 7%;
    margin-left: 7%;
}
 
.Big_checkbox{
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 4%;
}

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .