Блог

Главная - Вопросы по программированию - Как настроить поля для маленьких экранов в Bootstrap 4?

Как настроить поля для маленьких экранов в Bootstrap 4?

#html #css

#HTML #css #bootstrap-4

Вопрос:

Я пытаюсь разными способами настроить оставшееся поле для мобильного (другого) размера экрана. Я устанавливаю поля в соответствии со средним размером экрана, используя margin-left. И хотите настроить размер экрана небольшого размера. В общем, какой метод полезен и полезен. В моем случае ничего не работает.Что не так?

Может кто-нибудь объяснить это на примере. Я могу настроить размер экрана для сетки столбцов. Но заголовок, верхний и нижний колонтитулы — это проблема. Если я дам заголовок и сделаю его горизонтальным -выровняйте по левому краю. Как изменить его для экрана другого размера? Что не так?

 1)Do I need to add different style tags for each of them(mobile and medium size using media query. It is not working.) 


2)I trying to add class visible-xs and add mobile-margin (h1 view on mobile)

3)Add bootstrap utility class (h1 Utility class) 



<script>
<!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- font awsome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
<!-- font awsome -->
    <script src='https://kit.fontawesome.com/a076d05399.js'></script>
    
</script>

<style>
  .read{
        width:300px;
        height:70px;
        border-radius: 40px;
        background-color: darkgoldenrod;
        padding-left: 50px;
        padding-top: 8px;
       margin-left: 400px;
        margin-top: 100px;
    }
    
.learn{
        width:300px;
        height:70px;
        border-radius: 40px;
        background-color: darkgoldenrod;
        padding-left: 50px;
        padding-top: 8px;
      /* margin-left: 400px;*/
      /*  margin-top: 300px;*/
    }
    .mobile{
        width:400px;
        height:70px;
        border-radius: 40px;
        background-color: darkgoldenrod;
        padding-left: 100px;
    } 
.mobile-margin{
        margin-left: 50px;;
    }    

@media only screen and (min-width : 320px) {
margin-left: 50px;
}

@media only screen and (min-width : 768px) {
margin-left: 400px;
}
</style>




<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 class="read">Read more</h1>
        </div>
    </div>
    </div>  
    
    
    <div class="container">
    <div class="row">
        <div class="col-md-12 ml-md-4 ml-sm-1">
            <h1 class="learn">Utility Class</h1>
        </div>
    </div>
    </div>  
    
    
   <div class="container">
    <div class="row">
        <div class="mobile-margin visible-xs">
            <h1 class="mobile">view on mobile</h1>
        </div>
    </div>
    </div>  
</body>

Ответ №1:

Вы можете попробовать классы начальной загрузки для настройки в соответствии с размерами экрана. Сначала установите значение по умолчанию (для мобильных устройств), а затем измените с помощью md или lg :

 <div class="row">
    <div class="col-md-3 ml-0 ml-lg-5">Margin Test</div>
    <div class="col-md-3 ml-0 ml-lg-3">Margin Test</div>
</div>

0 для мобильных экранов установлено значение margin-left, а 5 для больших экранов — значение margin-left

Ответ №2:

Я привожу вам пример элемента заголовка H1.

Сначала убедитесь, что вы правильно добавили ссылку bootstrap css на свою страницу.

В bootstrap вы можете использовать m класс для полей и p класс для заполнения. Кроме того, вы можете дополнительно указать сторону, на которую вы хотите применить поля или отступы. Используйте ml , например, для установки поля влево. Вы можете присвоить ему значение от 0 до 5. Например, ml-3 . Вы также можете указать несколько значений для нескольких размеров экрана, как показано в примере ниже:

 <h1 class="ml-5 ml-md-3 ml-lg-0">Header Text</h1>

В этом примере элемент заголовка будет иметь поле 5, оно изменится на 3, когда размер экрана достигнет среднего, и изменится на 0, когда размер экрана станет большим.

Ответ №3:

Все, что вам нужно сделать, это указать имя класса на экранах мультимедиа.Вы не указали имя своего класса, а просто указали margin-left

 @media only screen and (min-width : 768px) {
margin-left: 400px;
}

Вы можете указать имя следующим образом

  @media only screen and (min-width: 320px) {
        .read {
          margin-left: 50px;
        }
      }

      @media only screen and (min-width: 768px) {
        .read {
          margin-left: 400px;
        }
      }

Вы можете центрировать заголовок с помощью

 <h4 class="text-center">
<h4 class="text-lg-center">h4: centered in large screen and centered in med/smaller</h4>
<h4 class="text-md-center">h4: centered in medium/large screen and centered in smaller</h4>
<h4 class="text-sm-center">h4: centered in small/medium/large except extra small</h4>

и для центрирования кнопок

 <div class="col text-center">
      <button class="btn btn-default">Centered button</button>
    </div>

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

1. Что я пытаюсь сделать, так это установить заголовок / кнопку в центре. Но похоже, что ml-4 или ml-5 не работают. Используя медиа-запрос, я могу этого добиться. Но при использовании классов начальной загрузки, не working.ml — 4 недостаточно, чтобы переместить заголовок в центр. (для всех типов экранов заголовок должен быть в центре) Сколько столбцов и какого размера я должен создать? Я создал < div class=»col-md-12″>, так как мне нужен полный размер экрана и заголовок в центре. Хотите сделать div отзывчивым.

2. Смотрите ответ. В bootstrap вы можете использовать text-lg-center для отображения заголовка по центру на больших экранах. и col text-center для центрирования кнопки