左定位引導酥料餅

我有一個似乎標籤左側的酥料餅：左定位引導酥料餅

$('label').hover(function() { 
       $(this).popover({ 
        offset: 10, 
        placement: 'left' 
       }).popover('show');

的酥料餅當前正在阻止一個單選按鈕，我想將其向左，比如，10px的。我似乎無法弄清楚如何做到這一點。抵消似乎什麼都不做（如果我加10或10000，這沒有什麼區別）。下面是一個這樣的標籤的HTML：

<label for="MainContent_Wizard1_rbLeader" id="MainContent_Wizard1_lblLeader" class="radio" data-original-title="Visionary Giving Level" data-content="Diamond (full-page ad) + 2 dinner tickets">Visionary ($250,000)<span class="radio" name="rbLeader"><input id="MainContent_Wizard1_rbLeader" type="radio" name="ctl00$MainContent$Wizard1$GivingLevel" value="rbLeader" onclick="WizardStep1_Click();" /></span></label>

我可以嘗試通過重寫CSS類的東西，如設置酥料餅的位置：

.popover { 
    left: 380px !important; 
}

但這是很不理想，因爲它出現在不同的地方使用不同的瀏覽器。

還有必須是一種加小右邊距的方法，是嗎？

謝謝。

來源

2012-10-25 Code Sherpa

我們可以得到一個小提琴嗎？ –

我不得不在幾分鐘後離開，直到今天晚些時候回到家後，纔會有時間發佈到JS小提琴。謝謝你的幫助。與此同時，我發佈了我的HTML –

只需注意，[popover文檔]（http://twitter.github.com/bootstrap/javascript.html#popovers）不會列出'offset'作爲選項。 – Sara

風格單一的popover似乎不太可能，並且 - 正如Sara所說 - 沒有offset（您可能會想到qtip？）這樣的選項。但是，您可以使用未公開的選項template，來自tooltip選項的「衍生」（實際上，popover僅引入content）。

通過修改template您可以爲每個popover單獨設計風格！在我看來，你的問題比酥料餅本身更在arrow，所以你可以嘗試從中間，只需添加一個樣式箭頭模板向上或向下移動箭頭，這樣

$('label').hover(function() { 
    $(this).popover({ 
     placement: 'left', 
     template: '<div class="popover"><div class="arrow" style="top:65px;"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' 
    }).popover('show'); 
});

當然，在這裏爲所有標籤設置的所有彈出的箭頭將被修改，因爲$('label').hover，但是如果你願意，彈出框可以單獨進行樣式化，沒有單選按鈕的彈出框可能不需要。

更新 - 風格全酥料餅+ 10px的向左

... 
template: '<div class="popover" style="margin-left:-10px;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' 
...

來源

2012-10-26 00:45:15 davidkonrad

嗨大衛。感謝您的評論，我非常感謝。我嘗試了你的建議，但是將箭頭置於兩個單選按鈕的中間，這並不理想（我有20個單選按鈕垂直疊放在頁面上）。我真的需要將整個彈出式箭頭+ 5/10像素的箭頭推到標籤的左側（揭示箭頭隱藏的單選按鈕）。任何其他想法？ –

是的，請參閱更新。當箭頭的行爲像這樣，它表明你已經爲popover設計了一些東西，或者如果我複製/粘貼你的HTML，那麼popover就不會變成屁股。我的測試是基於清潔/「新鮮」TB。 – davidkonrad

謝謝David！那很完美。我做了你的建議，但是嘗試保證金。再次感謝！ –

嘗試使用此方法添加右頁邊距：

.popover.left{ 
    left: calc(100% - 10px) !important; 
}

來源

2015-06-05 11:29:15 marcottsilva

您可以添加數據放置=「左」的元素。

來源

2015-07-15 15:41:13 Eliseo

左定位引導酥料餅

回答

相關問題