Question

如何使用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

Answer 1

a元素是行内元素。这意味着它们不会重新开始。

只需将display:block添加到a元素中即可。也许删除右边距，使其保留在右侧。

或使其换行，但要保持其宽度，您可以将所有文本包装在p元素内，该元素是块状。因此，a无需添加任何内容即可换行。

inline/block elements

.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>

Answer 2

将文本包装在<p>元素中，并在按钮上添加mr-auto以使其与文本右对齐。

.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>

如何像这样对齐文本和按钮，引导

2 个答案: