на тех же блоках, но с интервалом

ProgramBox

на тех же блоках, но с интервалом

Post author:admin
Запись опубликована:20 января, 2022
Post category:Вопросы по программированию

#html #css #bootstrap-4

Вопрос:

У меня есть нижний колонтитул , над которым я работаю, называется <footer class="site-footer"> , внутри этого нижнего колонтитула находится контейнер <div class="container"> , а внутри этого контейнера-3 подразделения. col-sm-12 col-md-6 и col-xs-6 col-md-3 (2 из col-xs-6 col-md-3 ).

То, что я здесь делаю, — это делаю эти 3 подразделения в одном блоке. но с интервалом.

Я использовал :

 .row{
  display: flex;
}

row класс-это класс, содержащий эти 3 подразделения.

На рисунке ниже показано, о чем я спрашиваю, мне нужно соблюдать дистанцию между разделами «О компании», «Горячие предложения» и «Ссылки». С другой стороны, социальные профили ниже должны быть справа.

Полный код нижнего колонтитула таков:

 .row {
  display: flex;
}

 <!-- Bootstrap 4.1.3 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Site footer -->
<footer class="site-footer">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-md-6">
        <h6>About</h6>
        <p class="text-justify">Paragraph about us.</p>
      </div>

      <div class="col-xs-6 col-md-3">
        <h6>Hot Offers</h6>
        <ul class="footer-links">
          <li><a href="#"> Offer 1 </a></li>
          <li><a href="#"> Offer 2 </a></li>
          <li><a href="#"> Offer 3 </a></li>
        </ul>
      </div>

      <div class="col-xs-6 col-md-3">
        <h6>Quick Links</h6>
        <ul class="footer-links">
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
          <li><a href="#">Refund Policy</a></li>
          <li><a href="#">Sitemap</a></li>
        </ul>
      </div>
    </div>
    <hr>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-sm-6 col-xs-12">
        <p class="copyright-text">Copyright amp;copy; 2021 All Rights Reserved by
          <a href="#">-</a>.
        </p>
      </div>

      <div class="col-md-4 col-sm-6 col-xs-12">
        <ul class="social-icons">
          <li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
          <li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
          <li><a class="linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

1. какую версию начальной загрузки вы используете?

2. @tacoshy если я использую bootstrap, все работает, но часть текста выделена жирным шрифтом и т. Д., И я пытался использовать его css только с

3. @tacoshy бутстрап 4.1.3

4. это было просто для правильной маркировки вопроса и добавления правильного css начальной загрузки в фрагмент кода.

Ответ №1:

Если вы хотите добавить пространство между блоками, вы можете добавить заполнение в свой элемент (ваши 4 столбца).

С помощью начальной загрузки вы можете добавить (например) класс «px-2» в каждый из ваших столбцов. Нравится :

 <div class="col-xs-12 col-md-3 px-2">

Это добавит 0,5 внутреннего пространства справа и слева от вашей колонки.

Использование интервала с начальной загрузкой : https://getbootstrap.com/docs/4.0/utilities/spacing/

Если вы не используете Bootstrap, просто добавьте свойство стиля заполнения в свой элемент, например :

 .column{
   padding: 0 0.5rem // will add margin on right and left
}

Кроме того, если вы хотите добавить свои социальные профили в ту же строку справа, вы должны поместить свой элемент DIV в тот же DIV с классом «строка», как показано ниже.
С классом «col-md-3» на каждом DIV столбцы будут отображаться в одной строке от средних экранов до очень большого экрана.
Сеточная система начальной загрузки : https://getbootstrap.com/docs/4.0/layout/grid/

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Site footer -->
<footer class="site-footer">

  <div class="container">
  
  <!-- One row with the 4 columns --> 
    <div class="row">
        
      <div class="col-xs-12 col-md-3 px-2">
        <!-- "About" content --> 
        <h6>About</h6>
    <p class="text-justify">Paragraph about us.</p>
      </div>

      <div class="col-xs-6 col-md-3 px-2"> 
      <!-- "Hot Offers" content --> 
      <h6>Hot Offers</h6>
    <ul class="footer-links">
          <li><a href="#"> Offer 1 </a></li>
          <li><a href="#"> Offer 2 </a></li>
          <li><a href="#"> Offer 3 </a></li>
        </ul>
      </div>

      <div class="col-xs-6 col-md-3 px-2">
      <h6>Quick Links</h6>
    <ul class="footer-links">
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
          <li><a href="#">Refund Policy</a></li>
          <li><a href="#">Sitemap</a></li>
        </ul>
      </div>
      
      <div class="col-xs-6 col-md-3 px-2">
      <h6>Social profiles</h6>
     <ul class="social-icons">
          <li><a class="facebook" href="#"><i class="fa fa-facebook"></i>FB</a></li>
          <li><a class="twitter" href="#"><i class="fa fa-twitter"></i>Twitter</a></li>
          <li><a class="linkedin" href="#"><i class="fa fa-linkedin"></i>LinkedIn</a></li>
        </ul>
      </div>
    </div>
    <hr>
    
    <div class="row">
      <div class="col-md-8 col-sm-6 col-xs-12">
        <p class="copyright-text">Copyright amp;copy; 2021 All Rights Reserved by
          <a href="#">-</a>.
        </p>
      </div>
    </div>
  </div>
 
</footer>

Наконец, о вашем комментарии к вашему ответу «если я использую bootstrap, все работает, но часть текста выделена жирным шрифтом и т. Д.», Вы можете импортировать только bootstrap-grid.css или bootstrap-grid.min.css.
Он включает в себя только сеточную систему и утилиты flex без всех стилей на элементах.