带表单的 Bootstrap 4 网格布局答案

【问题标题】：Bootstrap 4 Grid Layout with Form带表单的 Bootstrap 4 网格布局
【发布时间】：2018-07-31 20:39:59
【问题描述】：

我正在制作简单的表单和控件，并与全宽度控件并排，但它不起作用，如果我放 col-sm-xx，它会中断并转到另一行。那么我怎样才能使它们在一行中具有完整的列宽

<div class="container-fluid">
    <div class="row align-items-center">
                <div class="col">
                    <div class="dropdown" id="dpLocation">
                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                            Location
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item">Sharq</a>
                            <a class="dropdown-item">Shuwaikh</a>
                            <a class="dropdown-item">Hawally</a>
                            <a class="dropdown-item">Farwaniya</a>
                            <a class="dropdown-item">Hawally</a>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <input type="text" placeholder="Mobile" class="form-control" id="txMobile" minlength="8" maxlength="8" pattern="\d*">
                </div>
                <div class="col">
                    <a>
                        <i class="fa fa-arrow-circle-right" style="font-size:24px;color:#fff"></i>
                    </a>
                </div>
        </div>
</div>

【问题讨论】：

@AG_BOSS 让我试着回复你
@AG_BOSS 检查我更新的图片
@AG_BOSS Bootstrap 4 中没有col-xs，只有col。见：getbootstrap.com/docs/4.1/layout/grid/#grid-options
好的理解@Klooven
@AG_BOSS margin-right 也不是个好主意，因为它会在不同的移动设备上提供不同的输出

标签： jquery html twitter-bootstrap bootstrap-4

【解决方案1】：

你应该使用col-auto最小化下拉按钮和图标的宽度，然后col使输入填充宽度...

https://www.codeply.com/go/hJcCGGUnpC

<div class="container-fluid">
    <div class="row no-gutters align-items-center">
        <div class="col-auto">
            <div class="dropdown" id="dpLocation">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    Location
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item">Sharq</a>
                    <a class="dropdown-item">Shuwaikh</a>
                    <a class="dropdown-item">Hawally</a>
                    <a class="dropdown-item">Farwaniya</a>
                    <a class="dropdown-item">Hawally</a>
                </div>
            </div>
        </div>
        <div class="col">
            <input type="text" placeholder="Mobile" class="form-control" id="txMobile" minlength="8" maxlength="8" pattern="\d*">
        </div>
        <div class="col-auto">
            <a>
                <i class="fa fa-arrow-circle-right" style="font-size:24px;"></i>
            </a>
        </div>
    </div>
</div>

【讨论】：

您的回复正常，但元素之间没有空格。我想要它们之间的一些空间
只需从.row 中删除no-gutters。我以为你不想要空间。
好的删除排水沟工作，但我们可以减少空白现在它有很多空间:(
使用spacing utils for padding。例如，px-1。这超出了原始问题的范围，即如何保持表单内联。请根据间距要求更新问题。

【解决方案2】：

试试下面的sn-p

.items{
  margin-right: 10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row align-items-center">
    <div class="col-sm-4 items">
      <div class="dropdown" id="dpLocation">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                            Location
                        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item">Sharq</a>
          <a class="dropdown-item">Shuwaikh</a>
          <a class="dropdown-item">Hawally</a>
          <a class="dropdown-item">Farwaniya</a>
          <a class="dropdown-item">Hawally</a>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <input type="text" placeholder="Mobile" class="form-control" id="txMobile" minlength="8" maxlength="8" pattern="\d*">
    </div>
    <div class="col-sm-4">
      <a>
        <i class="fa fa-arrow-circle-right" style="font-size:24px;color:#fff"></i>
      </a>
    </div>
  </div>
</div>

【讨论】：

不同之处在于我认为 div class="col" 对吗？
您拥有@Milind AG_BOSS 是的其他依赖项似乎是什么。因为它可以在这个 sn-p 中工作
对不起，它正在工作，但它们之间没有空间，我们该怎么做
你能显示截图吗，我不清楚你的意思@Milind
也许通过为 css 声明一个类来增加一些边距？