Question

我的视图渲染时出现问题，我使用输入组类加入文本框和输入，但问题是如果你看到他们没有聚在一起，我已经找到了一个解决方案删除部分网站.css＆＃39; mvc项目默认生产，但对我来说不起作用。这是我的代码。

ConvertNumbertToText

and its views like this

Answer 1

尝试更改div。

的宽度

更新：

我对您TextBox和Label（产品名称）低于span的原因感到困惑。

以下是双方都add-ons的{{3}}：

<div class="form-group">
    <label class="control-label">Input addons</label>
    <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">Button</button>
        </span>
    </div>
</div>

Answer 2

您的问题是“产品名称：”属于输入组，但不在输入组兼容标记中。这是一个有一些选择的plunker。 enter link description here

<form action="/Products/Index" method="post">
    <div class="input-group">
      <span class="input-group-addon"> Product name:</span>
      <input class="form-control" id="id" name="id" type="text" value="" />
      <span class="input-group-btn">
          <input type="submit" value="Filter" class="btn btn-default" />
        </span>
    </div>
  </form>

  <form action="/Products/Index" method="post">
    <label>Product name:</label>
    <div class="input-group">      
      <input class="form-control" id="id" name="id" type="text" value="" />
      <span class="input-group-btn">
          <input type="submit" value="Filter" class="btn btn-default" />
        </span>
    </div>
  </form>

使用MVC上的Bootstrap输入组在教科书和输入类型按钮之间进行间隙

2 个答案: