Bootstrap, CSS - диапазон в пределах отступа строки - PullRequest
Новая
       3

Bootstrap, CSS - диапазон в пределах отступа строки

0 голосов
/ 17 января 2020

В моем проекте я реализую bootstrap и использую его сеточную систему. Я создаю строку, а затем добавляю диапазон внутри строки, который действует как столбец (col-12).

Этот диапазон, который я использую, подчеркнут, и я добавляю <br> элементы внутри диапазона, чтобы отделить его. линия. Первая строка автоматически отступает вправо больше, чем две другие строки. Я пытаюсь использовать тег &nbsp;, однако это не работает, поскольку мой текст подчеркнут и создает нежелательное подчеркивание перед текстом.

Кто-нибудь знает проблему? Спасибо.

Вот мой код: 

.mainBodyTxt {
  color: white;
  position: relative;
  font-family: 'Roboto', sans-serif;
  font-size: 54px;
  z-index: 2;
  left: 200px;
}
.container-fluid {
  background:lightgrey;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <!-- <div class="col-md-4 col-lg-6">-->
    <u style="color: white;"><span class="col-12 mainBodyTxt">I really like <br>
    Blue <br>Sandwiches</span> </u>
  </div>
</div>

1 Ответ

2 голосов
/ 17 января 2020

Ваш макет дает правильный отступ, вероятно, потому что вы используете <u> вне <span class='col-12'>

col-x элементы должны быть прямыми потомками строка элементов!

Чтобы решить эту проблему, вы можете:

  1. Поместить тег <u> в span (пример 1)
  2. Удалите тег <u> и присвойте span атрибут CSS text-decoration:underline (пример 2)
  3. Удалите тег <span> и задайте u классы col-12 mainBodyTxt (пример 3) 

.mainBodyTxt {
  color: white;
  position: relative;
  font-family: 'Roboto', sans-serif;
  font-size: 54px;
  z-index: 2;
  left: 200px;
}
.container-fluid {
  background:lightgrey;
}
.mainBodyTxtUnderlined{
  color: white;
  text-decoration:underline;
  position: relative;
  font-family: 'Roboto', sans-serif;
  font-size: 54px;
  z-index: 2;
  left: 200px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="" crossorigin="anonymous">

<!-- example 1 -->
<div class="container-fluid">
  <div class="row">
    <span class="col-12 mainBodyTxt"><u style="color: white;">I really like <br>
    Blue <br>Sandwiches</u></span> 
  </div>
</div>
<br>

<!-- example 2 -->
<div class="container-fluid">
  <div class="row">
   <span class="col-12 mainBodyTxtUnderlined">I really like <br>
    Blue <br>Sandwiches</span>
  </div>
</div>
<br>
<!-- example 3 -->
<div class="container-fluid">
  <div class="row">
    <u class="col-12 mainBodyTxt">I really like <br>
    Blue <br>Sandwiches</u>
  </div>
</div>
...