Question

我希望有一个内联bootstrap 4表单占用整个宽度（输入和按钮之间没有空格）：

1个输入类型文本和1个按钮在超小型设备中
2个输入类型文本和1个按钮在小型设备中
3个输入类型文本和1个按钮在中型和大型设备中

但它不能使用下面的代码。我不知道是不是因为表格打开和关闭的地方。这是一个例子： https://jsfiddle.net/o8jzq00f/1/

HTML：

<div class="container-fluid bg-success">

  <div class="row no-gutters justify-content-center" style="background-color: orange">
    <div class="col-xs-12">
      <h1 class="m-3">Title</h1>
    </div>
  </div>

  <div class="row no-gutters justify-content-center">
    <form>
      <div class="col-xs-10 col-sm-4 col-md-3">
        <label class="sr-only" for="inlineFormInput">Name</label>
        <input type="text" class="form-control" id="inlineFormInput" placeholder="Jane Doe">
      </div>
      <div class="col-sm-4 col-md-3  hidden-xs-up">
        <label class="sr-only" for="inlineFormInput">Name</label>
        <input type="text" class="form-control" id="inlineFormInput" placeholder="Jon Doe">
      </div>
      <div class="col-sm-4 col-md-3 hidden-md-up">
        <label class="sr-only" for="inlineFormInput">Name</label>
        <input type="text" class="form-control" id="inlineFormInput" placeholder="Jon Doe">
      </div>

      <div class="col-xs-2 col-sm-4 col-md-3">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
      </div>
    </form>

</div>

Answer 1

使用row类绑定您的列然后它将起作用 <div class="row">...under this you can use col classes and specify the width ...</div>

内联表单不起作用

1 个答案: