如何对齐像这样的文本和按钮，bootstrap

Question

如何使用bootstrap将文本按钮对齐到左侧和右侧，这里是屏幕和代码，也许问题是愚蠢的，但我只是这个领域的初学者。我怎么能做到这一点，如果bg图像在theese改变后对移动设备做出响应，我会很棒。

.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元素块中。因此，无需添加任何内容即可进入新行。

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>