Bootstrap popover genişliğini değiştirme | Netgez.com
SORU
18 EKÄ°M 2013, Cuma

Bootstrap popover geniÅŸliÄŸini deÄŸiÅŸtirme

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/

CEVAP
17 Mart 2014, PAZARTESÄ°

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

Twitter Bootstrap popover increase width

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/

Bunu PaylaÅŸ:
  • Google+
  • E-Posta
Etiketler:
CssTwitter-Bootstrap,-Bootstrap-3 TwitterTwitter-bootstrapPopoverTwitter-bootstrap-3

AYNI ETÄ°KETTEKÄ° VÄ°DEOLAR

YORUMLAR

SPONSOR VÄ°DEO

Rastgele Yazarlar

  • ★ByScrapi★ Designs

    ★ByScrapiâ

    27 AÄžUSTOS 2013
  • Mr_BrettHooge

    Mr_BrettHoog

    3 Ocak 2011
  • Photoshop Training Channel

    Photoshop Tr

    13 Temmuz 2012

Ä°LGÄ°LÄ° SORU / CEVAPLAR

Ä°LGÄ°LÄ° BAÄžLANTILAR