Question

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

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

我想将以下代码段转换为引导程序，以便做出响应：

此处是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;
}

问题：如何将上述代码笔输出转换为引导行，col-*

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

Answer 2

我认为您可以看到下面的示例，这可能满足您的需求。另外，您可以将col-x-x属性设置为在一行中放置3个以上的输入。

row-col example

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

2 个答案: