부트 스트랩에서 버튼 팝업 사용

Question

간단한 웹 페이지에 대해 부스트랩을 사용하고 있습니다. 나는 페이지의 중간에 맨 아래 줄에 버터를 놓으려고 노력하고있다. 이것은 popover 버튼입니다. 그러나이 버튼을 배치하고 popover 메시지를 표시하기 위해 클릭하면 메시지가 있어야하는 팝업 상자가 없으며 메시지는 내 웹 페이지에 표시되고 오른쪽의 페이지는 다음과 같습니다. 내 HTML 코드 아래

<div class="row text-center contact-row"> 
       <div class="col-md-12"> 
        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 
        Popover on right 
        </button> 
        <br> 
       </div> 
      </div> 

및 내 자바 스크립트 코드 :

<script type="text/javascript"> 
    $(function() { 
    $('[data-toggle="popover"]').popover() 
    }) 
    </script> 

내 질문은 다음과 같습니다 1) 내가 페이지의 중간에 버튼을 배치 할 수있는 방법? 2.) popover 메시지를 페이지 자체가 아닌 popover 메시지 상자에 나타나게하려면 어떻게해야합니까?

Answer 1

먼저 js 파일과 css를 확인하도록 요청할 것입니다. 다음 가져온했는지 확인하십시오 :

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

1. 이 다른 부트 스트랩 파일의 전에 확인 (부트 스트랩 전에 JQuery와 포함). 예를 들어

:에 모든 것을

<div class="container"> 
    <div class="row center-middle"> 
     <div class="col-md-12"> 
      <button>......</button> 
     </div> 
    </div> 

</div> 

주위에 먼저 클래스 컨테이너를 추가

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 

첫 번째 질문에 대답하기 위해

귀하의 CSS :

.center-middle{ 
    min-height: 100%; 
    display: flex; 
    align-items: center; 
}