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

【问题标题】：Cannot get my bootstrap rows on the same line无法在同一行上获取我的引导行
【发布时间】：2017-04-04 02:43:02
【问题描述】：

我阅读了其他类似的问题，但我的问题更基本。我对 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。

这应该很简单，但我只是没有理解我猜的概念。我做错了什么？

【问题讨论】：

您在类属性值中放置点字符时出错。不要使用 class=".col-md-4"，而是使用 class="col-md-4"。
Twitter Bootstrap 3 Inline Form with labels的可能重复
@AndrewB 是的，也请看过去。那行得通！ tyvm

标签： c# asp.net-mvc twitter-bootstrap

【解决方案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>

此外，您不需要在类中的类名前添加.。

【讨论】：

泰！如此简单以至于我忽略了的东西。
总是乐于提供帮助！

【解决方案2】：

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

<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>

【讨论】：

【解决方案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" >

【讨论】：

【解决方案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 的信息。您的原始代码没有为列使用正确的类。

【讨论】：

【解决方案5】：

就像@Asif Raza 所说，您应该指定要定位的屏幕尺寸。请记住，尺寸适用于您指定的尺寸和 UP。所以如果你指定一个中等尺寸的屏幕，它会影响中等尺寸的屏幕和更大，而不是更小。
我不认为那是您的问题，我认为您发生的事情是您没有看到导致文本框放置在下方的额外边距。容器的最大宽度将为 12 列，您正在使用它，但如果中间有任何其他边距，它将导致文本框低于。我建议使用 F12 检查元素以进行分区，看看是否添加了任何额外内容。

【讨论】：