>

부트 스트랩을 사용하여 텍스트 버튼을 왼쪽과 오른쪽에 맞추는 방법은 화면과 코드입니다. 어쩌면 질문은 어리석지만이 분야의 초보자 일뿐입니다. 내가 만들 수있는 방법, 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 안에 넣을 수 있습니다  블록 인 요소. 따라서 아무 것도 추가하지 않아도 새로운 줄로 갈 것입니다.

    인라인/블록 요소

    .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 추가  버튼을 클릭하여 텍스트와 오른쪽으로 맞 춥니 다.

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

  • 이전 mysql - LEFT JOIN에 null 값이 표시되지 않습니다
  • 다음 c# - 여러 JSON 파일을 xml 파일로 변환