Блог

Главная - Вопросы по программированию - Как выровнять текст и кнопку вот так, bootstrap

Как выровнять текст и кнопку вот так, bootstrap

#html #css

#HTML #css

Вопрос:

Как выровнять текстовую кнопку по левой и правой сторонам с помощью bootstrap, вот экран и код, возможно, вопрос глупый, но я всего лишь новичок в этой области. Как я мог бы это сделать, я был бы удивлен, если изображение bg будет отзывчивым на мобильных устройствах после этих изменений.

 .graphics {
	background: url("img/graphics.png");  /* projektowanie grafiki block */
	background-position: center center;
	background-size: cover;
	font-family: Lato;
	color: white;
	margin-top: 10px;
	text-align: right;
	padding: 100px 0px;
}


.btn-primary {
	background-color:#090045;
	margin-right:350px;
	border-radius: 0;
	border-width: thin;
}  
   <div class = "graphics">
<h2>Projektowanie graficzne</h2>
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsum
<a class="btn btn-primary btn-md" href="#projektowanie-graficzne">Zobacz więcej</a>
</div>

Как это выглядит сейчас
https://ibb.co/Brz8S4K

Как это должно выглядеть https://ibb.co/tm4HCdf

Ответ №1:

a элементы являются встроенными элементами. Это означает, что они не начинаются с новой строки.

Просто добавьте display:block в a элемент. И, возможно, удалите правое поле, чтобы оно оставалось с правой стороны.

ИЛИ, чтобы сделать это на новой строке, но сохранить ее ширину, вы можете перенести весь свой текст внутрь p элемента, который является блоком. Таким образом, a перейдет на новую строку без необходимости добавлять к ней что-либо.

встроенные / блочные элементы

 .graphics {
	background: url("img/graphics.png");  /* projektowanie grafiki block */
	background-position: center center;
	background-size: cover;
	font-family: Lato;
	color: white;
	margin-top: 10px;
	text-align: right;
	padding: 100px 0px;
  background-color: black
}


.btn-primary {
	background-color:red;
	/* margin-right:350px; maybe remove this */
	border-radius: 0;
	border-width: thin;

}  
 <div class = "graphics">
<h2>Projektowanie graficzne</h2>
<p>
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsum
</p>
<a class="btn btn-primary btn-md" href="#projektowanie-graficzne">Zobacz więcej</a>
</div>

Ответ №2:

Заключите ваш текст в <p> элемент, а также добавьте mr-auto кнопку on, чтобы выровнять его по тексту по правому краю.

 .graphics {
  background: url("https://picsum.photos/200/300");
  /* projektowanie grafiki block */
  background-position: center center;
  background-size: cover;
  font-family: Lato;
  color: white;
  margin-top: 10px;
  text-align: right;
  padding: 100px 0px;
}

.btn-primary {
  background-color: #090045;
  margin-right: 350px;
  border-radius: 0;
  border-width: thin;
}  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
<div class="container-fluid">
  <div class="graphics">
    <h2>Projektowanie graficzne</h2>
    <p>
      Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem
      ipsumipsumLorem ipsum Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem
      ipsumipsumLorem ipsum Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum Lorem ipsumLorem ipsumLorem
      ipsumipsumLorem ipsumipsumLorem ipsum Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum Lorem ipsumLorem ipsumLorem ipsum Lorem ipsumLorem ipsumLorem ipsum
    </p>
    <a class="btn btn-primary btn-md mr-auto" href="#projektowanie-graficzne">Zobacz więcej</a>
  </div>
</div>