Question

我读了其他类似的问题，但我的问题更基本。我对bootstrap很新，但我正在测试它是否适用于我需要通过手机，平板电脑和任何其他设备打开的简单表单。

我试图让我的文本框与描述它的文本位于同一行。相反，文本框位于文本下面。

以下是发生的事情：

以下是上述的cshtml页面：

@model  MvcBootstrap.Models.HomeModels.VisitingCustomer

@{
    ViewBag.Title = "Home Page";
}

<div class="">
    <p class="lead">Please enter your branch number, account number, and at least the first three characters of your last name or at least the first three characters of your company name below so we can locate your account.</p>
</div>

<div class="container">

  @using (Html.BeginForm("TypeOfPayment", "Home", FormMethod.Post))
  {
    <div class="row">
      <h2>Account Lookup</h2>

      <div class=".col-md-4">
        Branch Number
      </div>

      <div class=".col-md-8">
        @Html.TextBoxFor(m => m.Branch, new {@class = "", @maxlength = "2"})
      </div>
    </div>

    <div class="row">
      <input id="submitpayment" class="typicalbutton" type="submit" value="Continue" />
    </div>

  }

</div>

我没有额外的css代码，也没有修改任何现有的css。

这应该是非常直接的，但我只是没有理解我猜的概念。我做错了什么？

Answer 1

您可以将分支编号和文本框分组到一列中，如此

<div class="col-md-4">
   <label for="branch-number">Branch Number</label>
   # add text box here and give it an id="branch-number"
</div>

此外，您不需要在课程类名前加.。

Answer 2

您可以尝试这种格式。 form-inline类使表单内联。您不需要使用响应列类。您也应该使用class="col-md-*"而不是class=".col-md-*"

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form class="form-inline">
  <div class="form-group">
     
    <label for="branch">  Branch Number</label>
    <input  type="text" class="form-control" id="branch no">
 </div>
  <button type="submit" class="btn btn-default">Submit</button>
   
</form>

＆＃13;

Answer 3

You can specify the class for different screen
 i.e
 col-lg-1 to col-lg-12 for large screen
 col-md-1 to col-md-12 for desktop / laptop screen
 col-sm-1 to col-sm-12 for tablet screen
 col-xs-1 to col-xs-12 for mobile screen

 Example

<input type="text" class="col-lg-6 col-md-6 col-sm-6 col-xs-12" >

Answer 4

您要找的是inline form。

@using (Html.BeginForm("TypeOfPayment", "Home", FormMethod.Post, new { @class="form-inline" }))
{
    <div class="row">            
        <div class="col-md-12">
            <h2>Account Lookup</h2>
            <div class="form-group">
                @Html.LabelFor(m => m.Branch)
                @Html.TextBoxFor(m => m.Branch, new {@class = "form-control", @maxlength = "2"})
            </div>
            <input id="submitpayment" class="typicalbutton" type="submit" value="Continue" />                
        </div>
    </div>
}

在此表单的模型中，您需要为Branch属性添加[DisplayName]属性，以便您可以使用上面包含的Html.LabelFor()帮助程序：

[DisplayName("Branch Number")]
public string Branch { get; set; }

您还想了解有关grid system的更多信息。您的原始代码没有使用适当的列类。

Answer 5

像@Asif Raza所说，你应该指定屏幕的目标大小。请记住，大小调整将适用于您指定的大小和UP。因此，如果您指定中等大小的屏幕，它将影响中等大小的屏幕，而不是更小的屏幕。
我不认为这是你的问题，我想你发生的事情是你有没有看到额外的利润导致文本框放在下面。容器的最大宽度将是12列，您正在使用它，但如果它之间还有任何其他边距，则会导致文本框落在下面。我建议使用F12检查元素以进入区域并查看是否有任何额外的添加。

无法在同一行上获取我的引导行

5 个答案: