Question

我一直在使用Bootstrap。我不会说我是专家但我很精通。尽管如此，这种形式内联问题让我头疼：

我正在尝试这是一件非常简单的事情，但在这里，我无法将两个元素排成一行：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="row">
<div class="col-xs-6">
  <form class="form-inline">
    <div class="form-group">
      <label for="modal_add_group_input"></label>
      <input class="form-control" id="modal_add_group_input" placeholder="Nombre de grupo" type="text">
    </div>
    <button type="submit" class="btn btn-success">
        <span style="color: white;" class="glyphicon glyphicon-plus-sign">      
        </span> Crear Grupo</button>
    </form>
</div>
</div>
</div>

在这里不尝试任何想象力。我回到基础，即使提供的示例也不起作用：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

......有什么建议吗？我究竟做错了什么？ C_C

PS：不是Bootstrap inline form's submit button not in the same line的副本。试过了。没用。

Answer 1

您在代码段中看到的问题是因为断点（form-group组件的宽度为100％）。你是否需要它在移动设备的同一行？

好吧，这里有3个解决方案

内嵌大屏幕
内联所有屏幕尺寸
内联所有屏幕尺寸NO GRID（更新回答）

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> **Inline for big screens devices**
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
<hr> **Inline for all screen sizes**
<form class="form-horizontal">
  <div class="form-group">
    <div class="col-xs-6">
      <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
      <div class="input-group">
        <div class="input-group-addon">$</div>
        <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
        <div class="input-group-addon">.00</div>
      </div>
    </div>
    <div class="col-xs-6">
      <button type="submit" class="btn btn-primary">Transfer cash</button>
    </div>
  </div>
</form>

<hr>
<div class="container">
  **Inline for all screen sizes NO GRID**
  <div class="row">

    <div class="col-xs-6">
      <form>
        <div class="pull-right">
          <button type="submit" class="btn btn-primary">Transfer cash</button>
        </div>
        <div class="">
          <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
          <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
            <div class="input-group-addon">.00</div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Bootstrap内联表单（输入+按钮）中断行

1 个答案: