Question

我有一个bootstrap 4输入文本框。我想让它在sm断点后停止增长，以便它不会扩展到整个屏幕宽度。

Answer 1

在输入的col-md-*格中使用wrap ...

sm占据所有屏幕，从md进入所有屏幕，直到width中，col-md-*占据整个屏幕

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
    <input type="email" class="form-control" placeholder="Enter email">
  </div>
     </div>
  </div>
</div>

Answer 2

.row {
  margin-top: 20px;
}

.col {
  background: #f8f9fa;
  border: solid 1px #ddd;
  padding: 5px 10px;
}

.col-sm-6 {
  background: #f8f9fa;
  border: solid 1px #ddd;
  padding: 10px;
}

input{
  max-width: 340px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col">
      Col-6
    </div>
    <div class="col">
      Col-6
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <form action="">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        </div>
      </form>
    </div>
  </div>
</div>

您可以使用max-width CSS属性简单地限制输入字段的宽度。

使文本框在sm断点后停止增长？

2 个答案: