引導文本框和按鈕佈局內的行

我有一些基本的引導和我試圖插入到應用的HTML代碼。我的代碼將文本框放在一行上，但在文本框的正下方有按鈕和ActionLink。我試圖在頁面上將所有這些功能放在一行上。引導文本框和按鈕佈局內的行

這是因爲如果頁面被過柱關閉和文本框被編程以佔用所述第一列的寬度的100％。我可以嘗試改變它，但寧願文本框保持當前的寬度。

請注意：我試圖把按鈕直接放在文本框的旁邊，但它仍然被推到它的下面，這就是爲什麼我認爲頁面被折斷並且文本框佔第一列100％。

@using (Html.BeginForm("Index", "Person", FormMethod.Get)) 
{ 
<form asp-action="Index" method="get"> 
    <div class="row"> 
     <div class="form-actions no-color col-md-12"> 
      <p> 
       Find by name: <input type="text" class="form-control" id="txtSearch" name="searchString" value="@ViewBag.CurrentFilter" /> 
       <input type="submit" value="Search" class="btn btn-default" /> | 
       @Html.ActionLink("Back to List", "Index") 
      </p> 
     </div> 
    </div> 
</form> 
} 

New Code: 
<form class="form-inline"> 
    <div class="form-group"> 
     <label for="txtSearch">Find by name:</label> 
     <input type="text" class="form-control" display="inline-block" id="txtSearch" name="searchString" /> 
     <input type="submit" value="Search" class="btn btn-default" /> | 
    </div> 
    @Html.ActionLink("Back to List", "Index") 
</form> <br />

來源

2017-01-02 AndrewC10

創建inline form with bootstrap classes，編輯了剃刀代碼，你得把，早在

<form class="form-inline"> 
    <div class="form-group"> 
     <label for="txtSearch">Find by name:</label> 
     <input type="text" class="form-control" id="txtSearch" name="searchString" /> 
    </div> 
    <input type="submit" value="Search" class="btn btn-default" /> | 
    <a href="#"> Back To List </a> 
</form>

來源

2017-01-02 15:26:30 Halter

感謝您的答覆。這開始讓我在那裏。我拿出了剃鬚刀代碼並編輯了上面的代碼。它仍然好像表格由於某種原因被關閉。按鈕和鏈接現在對齊，但垂直條被奇怪地推到整行之下。 – AndrewC10

@ AndrewC10不知道，你可能有一些其他的風格與此代碼衝突的，我會的東西，如Chrome瀏覽器開發工具檢查它。 [看看這個jsbin，沒有其他干擾代碼工作正常（https://jsbin.com/najuvixano/edit?html,output），如果你能添加什麼它做它的截圖可以幫助 – Halter

是的，我覺得如果有CSS覆蓋我正在嘗試做的事情。我仍然在學習MVC應用程序的完整文件結構。試圖現在添加屏幕截圖。 – AndrewC10

的問題是出類「表單控制」你的第一個輸入文本。它的顯示是塊。如果你想保持文本的寬度。將顯示設置爲內嵌塊並設置寬度。

來源

2017-01-02 15:37:47

引導文本框和按鈕佈局內的行

回答

相關問題