引導內嵌形式 - 水平疊加輸入和按鍵

-1

     INPUT1 INPUT2 INPUT3 INPUT4 BUTTON

我需要結束4個輸入字段所有這些要在表單標籤內水平堆疊，並且應與任何填充或空格內聯，顯示在橫幅頂部的頁面中心。需要使用bootstrap完成此操作。

問候，時調何塞

來源

2017-04-25 Sijo Jose

試試這個吧。

<form> 
    <div class="input-container"> 
    <div class="inline-content"> 
     <input type="text" value="input 1"> 
     <input type="text" value="input 2"> 
     <input type="text" value="input 3"> 
     <input type="text" value="input 4"> 
     <button type="button">button</button> 
     </div> 
    </div> 
</form>

我也創建了一個Bootply。鏈接在這裏。 http://www.bootply.com/XlBQ3QRLGN

來源

2017-04-26 05:55:15

謝謝Rafraf .. –

不客氣。您可以將其標記爲已回答。快樂的編碼。 –

下面的代碼可能會幫助

HTML代碼： -

<div class="header"> 
    <div class="inner"> 
     <input type="text"/> 
    <input type="text"/> 
    <input type="text"/> 
    <input type="text"/> 
    <input type="submit"/> 
    </div> 
</div>

CSS代碼： -

div { 
    min-height:75px; 
    line-height:75px; 
    text-align:center; 
    color:white; 
    font-weight:bold; 

} 

.inner { 
    width:100%; 
    max-width:960px; 
    margin:0 auto; 
} 

.header { 
    background:red; 
}

使用使用引導形式的內聯： -

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style> 
form { 

    margin: 0 auto; 
} 


    </style> 
</head> 
<body> 

<form class="form-inline"> 
    <label class="sr-only" for="inlineFormInput">Name</label> 
    <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="inputone"> 

    <label class="sr-only" for="inlineFormInput">Name</label> 
    <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="inputtwo"> 

    <label class="sr-only" for="inlineFormInput">Name</label> 
    <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="inputthree"> 
    </div> 

    <button type="submit" class="btn btn-primary">Submit</button> 
</form> 

</body> 
</html>

來源

2017-04-25 13:36:45

感謝Shabarish！有沒有什麼辦法可以在使用表格線類的bootstrap中做到這一點.. –

是的，你甚至可以使用表格線類來做到這一點。我已經更新了我的答案，可能會對你有所幫助 –

使用自助

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <form> 
    <label class="text-inline"> 
     <input type="text"> 
    </label> 
    <label class="text-inline"> 
     <input type="text"> 
    </label> 
    <label class="text-inline"> 
     <input type="text"> 
    </label> 
    <label class="btn-inline"> 
     <input type="submit" name="submit"> 
    </label> 
    </form> 
</div> 

</body> 
</html>

來源

2017-04-26 06:22:58

引導內嵌形式 - 水平疊加輸入和按鍵

回答

相關問題