입력 오른쪽에 배치할 때 부트스트랩 팝오버를 더 넓게 만드는 방법은 무엇입니까?

Bootstrap 팝오버의 너비를 변경하는 방법

Bootstrap 3을 사용하고 배치가 입력 구성 요소의 오른쪽에 있는 팝오버를 구현하려고 하면 팝오버의 너비가 부적절하게 나타나는 문제가 발생할 수 있습니다. 이 문제는 Bootstrap의 양식 제어 요소 설계로 인해 발생하며 이로 인해 전체 너비 입력 요소가 생성됩니다.

HTML 코드

<code class="html"><div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text"
                         data-toggle="popover" data-trigger="hover"
                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div></code>

CSS 솔루션

할 수 있습니다. CSS를 사용하여 팝오버의 너비를 수정합니다.

<code class="css">/* The max width is dependant on the container (more info below) */
.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}</code>

그러나 문제가 해결되지 않으면 팝오버에 대한 컨테이너를 지정해야 할 수도 있습니다.

<code class="javascript">// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});</code>

및 컨테이너 속성을 조정하면 팝오버가 전체 너비로 확장됩니다.

추가 정보

• 팝오버는 처음에 트리거 요소로 제한됩니다.
• 컨테이너를 본문으로 사용하면 팝오버가 요소 범위를 넘어 확장될 수 있습니다.
• 팝오버의 최대 너비는 컨테이너에 따라 결정됩니다.

JSFiddle

솔루션이 실제로 작동하는 모습을 보려면 다음 JSFiddle을 방문하세요.

JSFiddle: http://jsfiddle.net/xp1369g4/

위 내용은 입력 오른쪽에 배치할 때 부트스트랩 팝오버를 더 넓게 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!