어떻게 전체 행을 오른쪽으로 이동할 수 있습니까?

Question

페이지의 가운데에 배치되도록 각 단추가 포함 된 행을 오른쪽으로 이동하려고합니다.

.row { 
    padding-left:300px; 
} 

그것은 이동 않습니다뿐만 아니라 버튼 사이의 거리를 변경합니다

<div> 
<div class="container-fluid" id="home"> 
    <h1>Welcome to Daniel's Portafolio</h1> 

<div class="row"> 
    <div class="col-md-2"> 
    <a href="https://www.linkedin.com/in/daniel-ramirez-b38203118"> 
    <button class="btn btn-default btn-social-icon btn-xl"><i class="fa fa-linkedin"></i> LinkedIn</button> 
    </a> 
    </div> 
    <div class="col-md-2"> 
    <a href="https://github.com/tadm123"> 
    <button class="btn btn-default btn-social-icon btn-xl"><i class="fa fa-github"></i> Github</button> 
    </a> 
    </div> 
    <div class="col-md-2"> 
    <a href="freecodecamp.com/tadm123"> 
    <button class="btn btn-default btn-social-icon btn-xl"><i class="fa fa-free-code-camp"></i> freeCodeCamp</button> 
    </a> 
    </div> 
    </div> 

나는 패딩 왼쪽을 사용하여 CSS에서이 작업을 수행하기 위해 노력하고있어. 어떤 도움을 주시면 감사하겠습니다.

Answer 1

그리드 레이아웃을 사용 중입니다. 왼쪽 패딩을 적용하면 열을 가운데로 정렬하지 않습니다. 그러나 이러한 열의 너비를 더 제한하고 약간 이상한 위치 지정을 제공합니다. 대신 오프셋을 사용해야합니다.

총 12 개의 열이 있습니다 (이상이 부트 스트랩의 기본값 임)이며 콘텐츠 (6 x 3)에 6을 사용하고 있습니다. 첫 번째 열을 가운데로 3만큼 오프셋해야합니다.

<div class="row"> 
    <div class="col-md-2 col-md-offset-3">