2013-09-24 12 views
8

कैसे बूटस्ट्रैप 3,0बूटस्ट्रैप इनलाइन इनपुट और बटन

http://joxi.ru/zcBBUtg5CbB8ELTo5CA

पर इस लॉगिन फॉर्म बनाने मेरे कोड:

<form role="form" class="form-inline"> 
    <input type="email" class="form-control input-sm" placeholder="Адрес электронной почты"> 
    <div class="form-group"> 
     <input type="password" class="form-control input-sm" placeholder="Пароль"> 
     <button class="btn btn-primary btn-sm">Войти</button> 
    </div> 

</form> 

http://jsfiddle.net/mborodov/Ls684/

लेकिन, मैं इनपुट और इनलाइन पासवर्ड के बीच गद्दी की जरूरत है इनपुट और सबमिट बटन।

उत्तर

6

इस jsFiddle साथ प्रयास करें: http://jsfiddle.net/Ls684/2/

<form role="form" class="padding-15 black round-5 form-inline"> 
    <input type="email" class="form-control input-sm" placeholder="Адрес электронной почты"> 
    <div class="form-group"> 
      <input type="password" class="form-control input-sm" placeholder="Пароль"> 
      <button class="btn btn-primary btn-sm">Войти</button> 
    </div> 
</form> 

सीएसएस

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'); 

.form-control[type="email"]{ 
    width : 100%; 
    margin-bottom: 10px; 
} 

.form-control[type="password"]{ 
    width : 60%; 
    float : left; 
} 

button{ 
    width : 30%; 
    float : left; 
    margin-left: 10%; 
} 
+0

Thx, लेकिन इस लेआउट उत्तरदायी नहीं। मुझे सभी डिवाइस –

+0

thx के लिए कॉलम चौड़ाई लेआउट की आवश्यकता है, लेकिन% –

+0

में बटन को ठीक करने के लिए बटन को आकार और पासवर्ड इनपुट अनुमोदित कैसे करें, एक उत्तरदायी फ़ॉर्म प्राप्त करने के लिए, आपको मेरे सीएसएस को रेडियंसेज के साथ संशोधित करना होगा। jsfiddle.net/Ls684/2 –

संबंधित मुद्दे