HTML, sütunlar neden üst üste kalmıyor? çizme atkısı

Fiddle

<div class="row">
    <div class="col-xs-6 input-group input-group-lg" style="padding-left:15px;">
        
        <input class="form-control" id="daterange" type="text" placeholder="Run Range"
        maxlength="128" readonly="readonly" style="background-color:White;cursor:pointer;" />
    </div>
    <div class="col-xs-3">
            <button type="button" class="btn btn-primary btn-lg has-spinner" id="btn-search">Go!</button>
    </div>
</div>

Kelimenin tam anlamıyla sitemde düzinelerce başka satır ve sütun örneği var ancak bu satır davranmayı reddediyor. Niye ya?

0
giriş grubu sınıfa katılacak bir şey var, eğer çıkarırsam düğme aynı çizgide gidiyor.
katma yazar Tim, kaynak
ilk iç içe div'inizdeki sınıfları ayırın. Yayılma alanınızı yerleştirin ve giriş grubu ve giriş grubu-lg ile başka bir div içine giriş yapın. Bu üç dersin bir arada olmasıyla ilgili bir sorun olduğuna inanıyorum.
katma yazar NewIsAlwaysBetter, kaynak
ilk iç içe div'inizdeki sınıfları ayırın. Yayılma alanınızı yerleştirin ve giriş grubu ve giriş grubu-lg ile başka bir div içine giriş yapın. Bu üç dersin bir arada olmasıyla ilgili bir sorun olduğuna inanıyorum.
katma yazar NewIsAlwaysBetter, kaynak

6 cevap

input-group class in Bootstrap is displayed as a block element, so it will push anything after it to a new line. If you want the button to be next to the input field, you need to add a class for example input-group-inline and override the default style from Boostrap.

.input-group-inline {
   display: inline-block;
}
1
katma

input-group class in Bootstrap is displayed as a block element, so it will push anything after it to a new line. If you want the button to be next to the input field, you need to add a class for example input-group-inline and override the default style from Boostrap.

.input-group-inline {
   display: inline-block;
}
1
katma

Kemanınızda bootstrap.css referansı eksik, ben ekledim ve hepsi iyi çalışıyor https: //jsfiddle.net/ujbh3z4p/ , html'nizdeki referansları kontrol etmeyi deneyin.

0
katma

Kemanınızda bootstrap.css referansı eksik, ben ekledim ve hepsi iyi çalışıyor https: //jsfiddle.net/ujbh3z4p/ , html'nizdeki referansları kontrol etmeyi deneyin.

0
katma

Dolguyu sıradan çıkarın. Bu, satırların farklı genişliklerde olmasına neden olabilir.

0
katma

Dolguyu sıradan çıkarın. Bu, satırların farklı genişliklerde olmasına neden olabilir.

0
katma