Html bootstrap表单组行为小型设备

我在表单上使用表单组时遇到了一个问题，特别是在sm视图中，我不喜欢表单组中输入字段之间的间距

是否有一种简单的解决方案，可以使表单组div内的输入字段之间的间距与不同表单组之间的间距一样大？检查下面的代码和小提琴

欢迎任何有用的提示！提前谢谢

编辑： 我不是在寻找CSS解决方案，我可以自己做一个——我在寻找一种合适的引导方式：）

名称
标题
大小
相机机身
国际标准化组织
镜头
光圈
面临
位置
创建日期
插入
重置

考虑一个表单组。我想你是在尝试这个

  <div class="custom-margin">
    <label class="col-md-2 control-label" for="input_name">Name</label>
    <div class="col-md-4">
      <input id="input_name" name="input_name" placeholder="IMG_0202" class="form-control input-md" type="text">
    </div>
  </div>
    <div class="custom-margin">
    <label class="col-md-2 control-label" for="input_title">Title</label>
    <div class="col-md-4">
      <input id="input_title" name="input_title" placeholder="San Francisco..." class="form-control input-md" type="text">
    </div>
  </div>

---

考虑一个表单组。我想你是在尝试这个

  <div class="custom-margin">
    <label class="col-md-2 control-label" for="input_name">Name</label>
    <div class="col-md-4">
      <input id="input_name" name="input_name" placeholder="IMG_0202" class="form-control input-md" type="text">
    </div>
  </div>
    <div class="custom-margin">
    <label class="col-md-2 control-label" for="input_title">Title</label>
    <div class="col-md-4">
      <input id="input_title" name="input_title" placeholder="San Francisco..." class="form-control input-md" type="text">
    </div>
  </div>

---

添加两个div并为小屏幕提供6列或更多列（取决于输入字段的大小）。现在，将这两个div视为用户将在屏幕上看到的两列，并分别在这些div中添加所需字段

示例

<div class="col-xs-7 col-md-4">
    <div class="form-group">
        <label class="col-md-2 control-label" for="input_name">Name</label>
        <div class="col-md-7">
            <input id="input_name" name="input_name" type="text" placeholder="IMG_0202" class="form-control input-md">
        </div>
    </div>
</div>

<div class="col-xs-7 col-md-4">
    <div class="form-group">
        <label class="col-md-2 control-label" for="input_title">Title</label>
        <div class="col-md-7">
            <input id="input_title" name="input_title" type="text" placeholder="San Francisco..." class="form-control input-md">
        </div>
    </div>
</div>

名称
标题

使用您的代码生成结果

使用解决方案代码的结果

---

添加两个div，并为小屏幕提供6列或更多列（取决于输入字段的大小）。现在，将这两个div视为用户将在屏幕上看到的两列，并分别在这些div中添加所需字段

示例

<div class="col-xs-7 col-md-4">
    <div class="form-group">
        <label class="col-md-2 control-label" for="input_name">Name</label>
        <div class="col-md-7">
            <input id="input_name" name="input_name" type="text" placeholder="IMG_0202" class="form-control input-md">
        </div>
    </div>
</div>

<div class="col-xs-7 col-md-4">
    <div class="form-group">
        <label class="col-md-2 control-label" for="input_title">Title</label>
        <div class="col-md-7">
            <input id="input_title" name="input_title" type="text" placeholder="San Francisco..." class="form-control input-md">
        </div>
    </div>
</div>

名称
标题

使用您的代码生成结果

使用解决方案代码的结果

---

使用边距。使用边距。没有现成的引导解决方案吗？我会自己建造一些东西的。不。这是非常具体的要求。最好先学习CSS，然后再学习引导，否则你会遇到很多问题，比如：没有引导即用的解决方案吗？我会自己建造一些东西的。不。这是非常具体的要求。最好先学习CSS，然后再进行引导，否则最终会遇到很多类似这样的问题