代码之家 › 专栏 › 技术社区 › tom

如有必要,带包装的内联输入组

bootstrap-4

0

tom · 技术社区 · 7 年前

我想根据输入组的内容将动态宽度的输入组放在一起。到现在为止,一直都还不错。我唯一的问题是,如果它们不能水平放置,它们会从容器中流出。

如果空间足够:

如果空间不够(现在的样子):。

如果空间不够(我想要的方式):

我的密码是:

<form class=“form inline”>
<DIV class=“表单组”>
<DIV class=“输入组mr-3 mb-2”>
<DIV class=“输入组预置”>
<span class=“input group text”>foo foo foo</span>
&L/DIV & GT;
<select class=“表单控件自定义选择”>
<选项>baaar</选项>
&选择/gt;
&L/DIV & GT;
<DIV class=“输入组mr-3 mb-2”>
<DIV class=“输入组预置”>
<span class=“input group text”>foo foo foo</span>
&L/DIV & GT;
<select class=“表单控件自定义选择”>
<选项>baaar</选项>
&选择/gt;
&L/DIV & GT;
<DIV class=“输入组mr-3 mb-2”>
<DIV class=“输入组预置”>
<span class=“input group text”>foo foo foo</span>
&L/DIV & GT;
<select class=“表单控件自定义选择”>
<选项>baaar</选项>
&选择/gt;
&L/DIV & GT;
&L/DIV & GT;
&表格/表格;
< /代码> <容器,如果它们不能水平放置。

如果空间足够:


如果空间不够(现在的样子):



如果空间不够(我想要的方式):



我拥有的代码:

<form class="form-inline">
  <div class="form-group">
    <div class="input-group mr-3 mb-2">
      <div class="input-group-prepend">
        <span class="input-group-text">foo foo foo</span>
      </div>
      <select class="form-control custom-select">
        <option>baaaar</option>
      </select>
    </div>
    <div class="input-group mr-3 mb-2">
      <div class="input-group-prepend">
        <span class="input-group-text">foo foo foo</span>
      </div>
      <select class="form-control custom-select">
        <option>baaaar</option>
      </select>
    </div>
    <div class="input-group mr-3 mb-2">
      <div class="input-group-prepend">
        <span class="input-group-text">foo foo foo</span>
      </div>
      <select class="form-control custom-select">
        <option>baaaar</option>
      </select>
    </div>
  </div>
</form>

1 回复 | 直到 7 年前

1

0

ProEvilz 7 年前

问题是你把所有东西都包在一个里面 .form-group . 各 input-group 应该属于自己 表单组

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
  <div class="form-group">
    <div class="input-group mr-3 mb-2">
      <div class="input-group-prepend">
        <span class="input-group-text">foo foo foo</span>
      </div>
      <select class="form-control custom-select">
        <option>baaaar</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <div class="input-group mr-3 mb-2">
      <div class="input-group-prepend">
        <span class="input-group-text">foo foo foo</span>
      </div>
      <select class="form-control custom-select">
        <option>baaaar</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <div class="input-group mr-3 mb-2">
      <div class="input-group-prepend">
        <span class="input-group-text">foo foo foo</span>
      </div>
      <select class="form-control custom-select">
        <option>baaaar</option>
      </select>
    </div>
  </div>
</form>