Смещенные столбцы начальной загрузки - PullRequest
Новая
       1

Смещенные столбцы начальной загрузки

0 голосов
/ 09 июня 2018

Это мой первый раз, когда я использую Bootstrap, и у меня возникают некоторые проблемы при попытке централизовать мой контент.

Я хочу содержать ширину контента, но разрешить цветам фона перетекать на всю ширину страницы.Я попытался сместить столбцы, однако это приводит к неравномерному интервалу по обе стороны от содержимого.

Моя текущая разметка здесь:

https://codepen.io/charlyanderson/pen/bKggyb?editors=1100

<div class="container-fluid">
    <div class="row">

        <div id="example-col-1" class="col-lg-5">
            <div class="row">
                <div class="col-lg-8 offset-md-4">
                    <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
                </div>            
            </div>
        </div>

        <div id="example-col-2" class="col-lg-7">
            <div class="row">
                <div class="col-lg-8">
                    <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
                </div>
            </div>
        </div>

    </div>
</div>

1 Ответ

0 голосов
/ 09 июня 2018
  1. Используйте ml-auto для первого внутреннего столбца и mr-auto для второго внутреннего столбца. 

#example-col-1 {
  background-color: beige;
}

#example-col-2 {
  background-color: pink;
  text-align: right;
}
<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div id="example-col-1" class="col">
        <div class="row">
          <div class="col-lg-8 ml-auto">
            <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
              Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
          </div>
        </div>
      </div>

      <div id="example-col-2" class="col">
        <div class="row">
          <div class="col-lg-8 mr-auto">
            <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
              Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</body>

</html>

https://codepen.io/anon/pen/BVpWwo

Используйте фиктивный столбец col-lg-4 перед первым внутренним столбцом и после второго внутреннего столбца. 

#example-col-1 {
  background-color: beige;
}

#example-col-2 {
  background-color: pink;
  text-align: right;
}
<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div id="example-col-1" class="col">
        <div class="row">
          <div class="col-lg-4"></div>
          <div class="col-lg-8">
            <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
              Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
          </div>
        </div>
      </div>

      <div id="example-col-2" class="col">
        <div class="row">
          <div class="col-lg-8">
            <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
              Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
          </div>
          <div class="col-lg-4"></div>
        </div>
      </div>

    </div>
  </div>
</body>

</html>

https://codepen.io/anon/pen/jKyBwy

Вы также можете найти этот вопрос полезным.

Смещение столбцовне работает (Bootstrap v4.0.0-beta)

Обновление

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

#example-col-1 {
  background-color: beige;
}

#example-col-2 {
  background-color: pink;
}
<html>
  
  <head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  </head>
  
  <body>

<div class="container-fluid">
  <div class="row">
    <div id="example-col-1" class="col-5">
      <div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-8">
          <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
        </div>            
      </div>
    </div>
    
    <div id="example-col-2" class="col-7">
      <div class="row">
        <div class="col-lg-9 text-right">
          <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
        </div>
        <div class="col-lg-3"></div>
      </div>
    </div>

  </div>
</div>
  </body>
</html>

Кстати, лучше использовать text-right вместо text-align: right; стиля.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...