Question

我正在制作简单的形式并且控制并排控制全宽度，但是它不起作用，如果我把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>

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

Answer 2

尝试以下代码段

＆＃13;

.items{
  margin-right: 10px;
}

＆＃13;

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

＆＃13;

带有表单的Bootstrap 4网格布局

2 个答案: