버튼을 올바르게 배치하는 방법을 찾는 데 도움이 필요합니다.

Question

현재 프로그래밍 클래스 용 퀴즈 게임을 진행 중입니다. 대부분의 작업은 의도 한대로 작동하지만, 버튼을시간에 올바르게 배치하는 방법을 알 수 없습니다. 이 GitHub의에 업로드하기 전에 완벽하게 작동으로 Trivia Game Button Error

이는 나에게 약간의 혼란 :

그것에서 버튼의 이동 공간입니다. 나는 또한이 오류를 해결할 수 없었다. 여기

bootstrap4 클래스가 포함 된 HTML 코드 : 나는 거의 추가 CSS

.noHover{ 
    pointer-events: none; 
} 

.h1Margin { 
    margin-bottom: 4rem; 
} 

을 사용하지

<div class="col-md-4"> 
     <button type="button" class="btn btn-primary mb-2" id="buttonHit">Start the Game </button> 
     <button class="btn btn-primary mb-2 float-right noHover">Time: <span class="badge badge-primary" id="time">00:30</span></button> 
     <div class="list-group" id="list-tab" role="tablist"> 
      <a class="list-group-item list-group-item-action active question" id="question" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Click "Start" to start the game</a> 
      <a class="list-group-item list-group-item-action answerBtn1 answerBtn" id="answer1" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile"></a> 
      <a class="list-group-item list-group-item-action answerBtn2 answerBtn" id="answer2" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages"></a> 
      <a class="list-group-item list-group-item-action answerBtn3 answerBtn" id="answer3" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings"></a> 
      <a class="list-group-item list-group-item-action answerBtn4 answerBtn" id="answer4" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings"></a> 
     </div> 
    </div> 

을 github

나는 호기심에 전체 게임을 찾을 수 있습니다 버튼을 올바르게 배치하는 방법을 배우십시오.

감사합니다.

Answer 1

버튼의 경우 상대 위치를 사용하고 상대 위치를 위 또는 아래 (왼쪽 또는 오른쪽)에서 원하는 위치로 지정할 수 있습니다.

이

• 컨테이너는 col-md-4

나는 방법을 모른다 버튼을 오른쪽으로 부유 시간 : 당신이 할 말을 정확히하고있는 것처럼

Answer 2

보인다 당신은 옳은 것처럼 보이기를 원했지만 다음 중 하나를 통해 더 멋지게 만들 수 있습니다.

1. #list-tab ~ clear 부유 요소 (clear: both;)
2. float-right 클래스를 제거하여 시간 단추를 언 플 플로합니다.