Блог

Главная - Вопросы по программированию - макет сетки не работает, контейнер занимает всю ширину экрана

макет сетки не работает, контейнер занимает всю ширину экрана

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

Я пытаюсь поместить две таблицы на веб-страницу, используя 10% поля слева, 60% свободного места и 30% свободного места. Изначально я создал контейнер, но если я изменяю параметр, ширина его не меняется. Он занимает всю ширину экрана.

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
       <div class="row">
    <div class="col-sm-6 offset-sm-3" style="border:solid black; background-color:red;">.col-md-3 .offset-md-3</div>
   
<div class="col-sm-6 offset-sm-6" style="border:solid black; background-color:green;">.col-md-3 .offset-md-3</div>
    </div>

Комментарии:

1. Где вы устанавливаете ширину в своем коде? Я мог бы пропустить это, но я не вижу этого в предоставленном вами коде.

2. @Zim теперь мой код правильный?

3. @Chipster будет ли этот class=»col-sm-6 » определять ширину?

4. Что такое 10% margin left, 60% space, and 30 % space CSS?

5. @zim допустим, что ширина равна 100 единицам, я хочу, чтобы поле в 10 единиц слева и 60 единиц для первого столбца и 30 единиц для второго столбца

Ответ №1:

Система сетки учитывает 12 столбцов, поэтому вы можете приблизить свои значения, как показано ниже:

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
       <div class="row">
    <div class="col-7 offset-1" style="border:solid black; background-color:red;"> 10% of 12 is 1.2 and 60% of 12 is 7.2 </div>
   
<div class="col-4" style="border:solid black; background-color:green;"> 30% of 12 is 3.6 so we use 4</div>
    </div>