[css] 부트 스트랩 팝 오버 너비 변경

Program / 글쓴이

Bootstrap 3을 사용하여 페이지를 디자인하고 placement: right있습니다. 입력 요소에 팝 오버를 사용하려고합니다 . 새로운 부트 스트랩은 form-control기본적으로 전각 입력 요소 를 사용하도록 합니다.

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>

내 의견으로는 popovers 너비가 너무 낮아서 div에 남아있는 너비가 아니기 때문입니다. 왼쪽에 입력 양식을 원하고 오른쪽에 넓은 팝 오버를 원합니다.

주로 Bootstrap을 재정의 할 필요가없는 솔루션을 찾고 있습니다.

첨부 된 JsFiddle. 두 번째 입력 옵션. jsfiddle을 많이 사용하지 않았으므로 알지 못하지만 결과를 보려면 출력 상자의 크기를 늘려보십시오. 작은 화면에서는 보이지 않습니다.
http://jsfiddle.net/Rqx8T/

답변

CSS를 사용하여 너비 늘리기

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!) */
}

이것이 효과가 없다면 아래 해결책을 원하고 container요소를 변경하십시오 . ( JSFiddle보기 )

트위터 부트 스트랩 컨테이너

그래도 작동하지 않으면 컨테이너를 지정해야합니다.

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

더 많은 정보

트위터 부트 스트랩 팝 오버 폭 증가

팝 오버는 트리거되는 요소 내에 포함됩니다. “전체 너비”를 확장하려면 컨테이너를 지정하십시오.

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

JSFiddle

JSFiddle을보고 사용해보십시오.

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

답변

또한 검색 텍스트 필드를 위해 더 넓은 팝 오버가 필요했습니다. 이 Javascript 솔루션 (여기 Coffee )을 생각해 냈습니다 .

$(".product-search-trigger")
  .click(-> false) # cancel click on <a> tag
  .popover
    container: "body"
    html: true
    placement: "left"
    title: "<strong>Product search</strong> enter number or name"
  .on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))

해결 방법은 마지막 줄에 있습니다. 팝 오버가 표시되기 전에 최대 너비 옵션이 사용자 정의 값으로 설정됩니다. tip 요소에 사용자 정의 클래스를 추가 할 수도 있습니다.

답변

나는 같은 문제가 있었다. 답을 찾고 꽤 시간을 보냈고 내 자신의 해결책을 찾았습니다. 머리에 다음 텍스트를 추가하십시오.

<style type="text/css">
    .popover{
        max-width:600px;
    }
</style>

답변

너비를 변경하려면 CSS를 사용할 수 있습니다

원하는 고정 크기

.popover{
    width:200px;
    height:250px;
}

원하는 최대 너비 :

.popover{
    max-width:200px;
    height:250px;
}

jsfiddle : http://jsfiddle.net/Rqx8T/2/

답변

팝 오버 너비를 변경하려면 템플릿을 재정의 할 수 있습니다.

$('#name').popover({
    template: '<div class="popover" role="tooltip" style="width: 500px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
})

답변

JavaScript 솔루션을 선호하는 사람들을 위해. 에서 부트 스트랩 4 팁 ()이되었다 getTipElement () 그리고 노의 jQuery 객체를 반환합니다. 따라서 Bootstrap 4에서 팝 오버의 너비를 변경하려면 다음을 사용할 수 있습니다.

}).on("show.bs.popover", function() {
    $($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});

답변

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

기본적으로 팝업 div를 입력 div 대신 행 div에 넣습니다. 문제를 해결했습니다.