Bir sayfa Bootstrap 3 ile tasarlıyorum. Giriş bir öğe üzerinde placement: right ile bir popover kullanmaya çalışıyorum. Yeni Bootstrap form-control kullanırsanız temelde tam genişlikte giriş elemanı olmasını sağlar.

HTML kodu şuna benzer:

<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>

Çörek genişliği bence onların herhangi bir genişlik div sol değil, çünkü çok düşük. Sol tarafta giriş formu, ve sağ tarafta geniş bir popover istiyorum.

Çoğunlukla, Bootstrap geçersiz kılmak zorunda kalmadığım bir çözüm arıyorum.

Ekli JsFiddle. İkinci giriş seçeneği. Bilmediğim pek çok şey jsfiddle kullanmadım, ama çıkış kutusunun boyutunu sonuçları görmek artırmayı deneyin, daha küçük ekranlarda bile göremez. http://jsfiddle.net/Rqx8T/

CSS ile genişlik artırmak

CSS popover genişliği, yani artırmak için kullanabilirsiniz:

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

Eğer bu işe yaramaz ise, muhtemelen container eleman alter aşağıda çözüm istiyorum. (View the JSFiddle)

Twitter bootstrap Kap

Eğer bu işe yaramaz ise, muhtemelen konteyner belirtmek gerekir:

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

Daha Fazla Bilgi

Bu popover tetiklenen olduğunu öğesi içinde yer alıyor. "Konteyner belirtin: . genişlik" tam uzatmak amacıyla

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

JSFiddle

Bu JSFiddle denemek için görüntüleyin.

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