Не хочет центрироваться элемент bootstrap

@Freeze_Breeze · Регистрация: 12.01.2016

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

Не хочет центрироваться элемент когда к div с классом row добавляю класс для центрирования содержимого колонки justify-content-center, стили применяются, но почему то не центрируется. В чем загвоздка, вроде бы все так использую и стили применяются уже и бутстрап через CDN подключал, ничего не вышло, так же не центрируется
Песочница

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
   <div class="row justify-content-center">
       <div class="col">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 30 42" xml:space="preserve" width="30px" height="42px">
       <g>
       <path class="st0" d="M15,41C7.3,41,1,34.7,1,27V15C1,7.3,7.3,1,15,1s14,6.3,14,14v12C29,34.7,22.7,41,15,41z"/>
       <path class="st1" d="M15,2c7.2,0,13,5.8,13,13v12c0,7.2-5.8,13-13,13C7.8,40,2,34.2,2,27V15C2,7.8,7.8,2,15,2 M15,0L15,0 C6.7,0,0,6.7,0,15v12c0,8.2,6.7,15,15,15h0c8.2,0,15-6.7,15-15V15C30,6.7,23.3,0,15,0L15,0z"/>
       </g>
       </svg>
     </div>
   </div>
</div>

@GRO_UA · 27.07.2018, 18:43

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
<div class="row align-items-center justify-content-center">
                <div class="col-xs">
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 30 42" xml:space="preserve" width="30px" height="42px">
                    <g>
                    <path class="st0" d="M15,41C7.3,41,1,34.7,1,27V15C1,7.3,7.3,1,15,1s14,6.3,14,14v12C29,34.7,22.7,41,15,41z"/>
                    <path class="st1" d="M15,2c7.2,0,13,5.8,13,13v12c0,7.2-5.8,13-13,13C7.8,40,2,34.2,2,27V15C2,7.8,7.8,2,15,2 M15,0L15,0 C6.7,0,0,6.7,0,15v12c0,8.2,6.7,15,15,15h0c8.2,0,15-6.7,15-15V15C30,6.7,23.3,0,15,0L15,0z"/>
                    </g>
                    </svg>
                </div>
            </div>
  </div>

@Freeze_Breeze · 27.07.2018, 18:53 **[ТС]**

GRO_UA, Хорошо, зацентрировало, спасибо. А почему такая запись col-md12, а не col-md-12, ведь вторая вроде бы правильная, но центрирование работает с col-md12, если пишу col-md-12, то не работает. (Поменял на col-xs). Это получается что горизонтальное выравнивание не работает на колонки col, верно?

@GRO_UA · 27.07.2018, 18:55

То я промахнулся, подредактировал, видимо ты не заметил еще)
На сколько я знаю, лучше всего flexom делать, но могу ошибаться, сам еще только учусь)

@Freeze_Breeze · 27.07.2018, 19:01 **[ТС]**

GRO_UA, так дело в том что если оборачиваю свой svg код в какой то блок и задаю ему два правила display: flex; justify-content: center; то все работает отлично, но почему то с бутсраповскими стилями не получилось, но Ваш метод работает, спасибо.

@GRO_UA · 27.07.2018, 19:03

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
<div class="row">
                <div class="col-md-offset-1 col-md-5">
 
                </div>
                <div class="col-md-1">
Центр
                </div>
                <div class="col-md-offset-1 col-md-6">
 
                </div>
            </div>
  </div>

Можно так, но не знаю на сколько это правильно

@Fedor92 · 27.07.2018, 23:35

CSS
1
svg{width:100%}

К первому примеру...

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	27.07.2018, 18:53 [ТС]
	GRO_UA, Хорошо, зацентрировало, спасибо. А почему такая запись `col-md12`, а не `col-md-12`, ведь вторая вроде бы правильная, но центрирование работает с `col-md12`, если пишу `col-md-12`, то не работает. (Поменял на col-xs). Это получается что горизонтальное выравнивание не работает на колонки `col`, верно? 0

@GRO_UA 10 / 9 / 9 Регистрация: 04.07.2018 Сообщений: 70
	27.07.2018, 18:55
	То я промахнулся, подредактировал, видимо ты не заметил еще) На сколько я знаю, лучше всего flexom делать, но могу ошибаться, сам еще только учусь) 1

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	27.07.2018, 19:01 [ТС]
	GRO_UA, так дело в том что если оборачиваю свой svg код в какой то блок и задаю ему два правила display: flex; justify-content: center; то все работает отлично, но почему то с бутсраповскими стилями не получилось, но Ваш метод работает, спасибо. 0