如何将多行输入转换为引导行输入答案

【问题标题】：how to convert mutiple row inputs to bootstrap row inputs如何将多行输入转换为引导行输入
【发布时间】：2018-07-29 01:24:00
【问题描述】：

如何将多个输入放入具有responsive 性质的单个row 中

我很难将所有 inputs 放入一个 row 中，我只能放置 3 个

我想将下面的 sn-p 转换为引导程序，以便我能够做出响应：

这里是codepen：https://codepen.io/anon/pen/EpbjKL

html：

<div class="input-wrapper">
  <div style="float:left;margin-right:20px;">
    <label for="name">Company Name</label>
    <input id="name" type="text" value="" name="name" style="width:200px">
  </div>

  <div style="float:left;margin-right:20px;">
    <label for="email">GST Number</label>
    <input id="email" type="text" value="" name="email">
  </div>

 <div style="float:left;margin-right:20px;">
    <label for="email">Branch Address</label>
    <input id="email" type="text" value="" name="email" style="width:300px">
  </div>

<div style="float:left;margin-right:20px;">
    <label for="email">Tin Number</label>
    <input id="email" type="text" value="" name="email" style="width:200px">
  </div>

  <div style="float:left;margin-right:20px;">
    <label for="email">pin code</label>
    <input id="email" type="text" value="" name="email" style="width:100px">
  </div>

<div style="float:left;margin-right:20px;">
    <label for="email">Date</label>
    <input id="email" type="text" value="" name="email" style="width:100px">
  </div>

<div style="float:left;margin-right:20px;">
    <label for="email">code</label>
    <input id="email" type="text" value="" name="email" style="width:100px">
  </div>
</div>

css：

input, label {
    display:block;
}

问题：如何将上面的codepen输出转换为引导行，col-*

【问题讨论】：

标签： html twitter-bootstrap css

【解决方案1】：

使用这个类 col-md-auto 使宽度自动和 d-inline-block 显示列内联块（引导程序 4）

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-md-auto col-lg-auto d-inline-block">
    <label for="name">Company Name</label>
    <input id="name" type="text" value="" name="name" style="width:200px">
  </div>

  <div class="col-md-auto col-lg-auto d-inline-block">
    <label for="email">GST Number</label>
    <input id="email" type="text" value="" name="email">
  </div>

 <div class="col-md-auto col-lg-auto d-inline-block" style="">
    <label for="email">Branch Address</label>
    <input id="email" type="text" value="" name="email" style="width:300px">
  </div>

<div class="col-md-auto col-lg-auto d-inline-block" style="">
    <label for="email">Tin Number</label>
    <input id="email" type="text" value="" name="email" style="width:200px">
  </div>

  <div class="col-md-auto col-lg-auto d-inline-block" style="">
    <label for="email">pin code</label>
    <input id="email" type="text" value="" name="email" style="width:100px">
  </div>

<div class="col-md-auto col-lg-auto d-inline-block" style="">
    <label for="email">Date</label>
    <input id="email" type="text" value="" name="email" style="width:100px">
  </div>

<div class="col-md-auto col-lg-auto d-inline-block" style="">
    <label for="email">code</label>
    <input id="email" type="text" value="" name="email" style="width:100px">
  </div>
</div>

【讨论】：

【解决方案2】：

我想你可以看看下面的例子，这可能会满足你的需要。此外，您可以设置 col-x-x 属性以在一行中放置 3 个以上的输入。

row-col example

【讨论】：