Raeesh Alam的社区主页

我在( 引导-4
第一次打破文本框和下拉移动。
您可以检查下面的代码片段。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="py-3">
  <div class="container l">
    <div class="row">
      <div class="col-md-12">
        <h5>Textbox & Dropdown (Break on Mobile Screen)</h5>
      </div>
      <div class="col-md-8 my-2">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon3">Business Name</span>
          </div>
          <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="Enter a business name">
        </div>
      </div>
      <div class="col-md-4 my-2">
        <select class="custom-select">
          <option>Exact Match</option>
          <option>Option #1</option>
          <option>Option #2</option>
          <option>Option #3</option>
        </select>
      </div>
    </div>
    
    <br><br>

    <div class="row">
      <div class="col-md-12">
        <h5>Textbox & Dropdown (Not break on Desktop/Mobile Screen)</h5>
      </div>
      <div class="col-8 my-2 pr-1 pr-md-3">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon3">Business Name</span>
          </div>
          <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="Enter a business name">
        </div>
      </div>
      <div class="col-4 my-2 pl-1 pl-md-3">
        <select class="custom-select">
          <option>Exact Match</option>
          <option>Option #1</option>
          <option>Option #2</option>
          <option>Option #3</option>
        </select>
      </div>
    </div>
  </div>
</div>