За последние 24 часа нас посетили 22516 программистов и 1014 роботов. Сейчас ищут 647 программистов ...

Как сделать что бы при масштабировании сайт оставался по центру, если установлен bootstrap?

Тема в разделе "HTML и CSS", создана пользователем Mavili, 25 ноя 2018.

Метки:
  1. Mavili

    Mavili Новичок

    С нами с:
    25 ноя 2018
    Сообщения:
    12
    Симпатии:
    0
    Изначально сделал что бы сайт оставался по центру при масштабировании таким образом:
    1. body {
    2. padding: 0;
    3. margin: 0;
    4. text-align: center;
    5. margin-left: auto;
    6. margin-right: auto;
    7. width: 1119px;
    8. overflow-x: hidden;
    9. background-color: #333333;
    10. }
    Позже подключил bootstrap и все это полетело к чертям, как сделать что бы сайт по прежнему не изменял своё местоположение вместе с этим фреймворком? (Удалить не могу).
     
  2. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    @Mavili Удали в body все кроме цвета, и используй класс bootstrap для масштабирования текста class="text-center" для блока
    class="mx-auto"

    HTML:
    1.  
    2. <!doctype html>
    3. <html lang="en">
    4. <!-- Required meta tags -->
    5. <meta charset="utf-8">
    6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    7.  
    8. <!-- Bootstrap CSS -->
    9. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    10.  
    11. <title>Hello, world!</title>
    12. </head>
    13. <h1 class="text-center">Hello, world!</h1>
    14. <div class="mx-auto" style="width: 200px;">
    15.      Centered element
    16. </div>
    17.  
    18. <!-- Optional JavaScript -->
    19. <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    20. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    21. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    22. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    23. </body>
    24. </html>
    25.  
    А лучше научится пользоваться этим
    https://getbootstrap.com/docs/4.1/layout/grid/
     
    Mavili и twim32 нравится это.