Question

我正在使用一个使用Bootstrap 4的网站。在此，我面临如下响应问题：

在我的网站上，我有一个搜索框和公司名称以及我的购物车框，如图所示。（在最大化的窗口中）

当我缩小浏览器窗口大小时，它会变为：

HTML code：

<div class="col-sm-12">
  <div class="container">
    <div class="row">

      <div class="col-3">
        <br>

        <div class="input-group ">
          <input type="text" class="form-control" placeholder="Search..." >
          <div class="input-group-append">
            <span class="input-group-text" >
              <i class="fas fa-search text-success" style="font-size:40px"></i>
            </span>
          </div>
        </div>

      </div>
      <div class="col-1"></div>
      <div class="col-4">
        <img src="assets/Images/Carousel Images/Abro.png" routerLink="/landingpage" class="img-fluid" alt="Responsive image">
      </div>
      <div class="col-1"></div>
      <div class="col-3">
        <br>
        <form class="form-inline">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text" id="basic-addon1">
                <i class="fas fa-shopping-bag text-primary" style="font-size:40px"></i>
              </span>
            </div>
            <input type="text" class="form-control bg-white" value="My Cart ({{nCount}})" readonly>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

如何解决这个问题？

Answer 1

Bootstrap输入组无响应

那是因为你没有使用响应式课程。

您使用的是col-3，col-1和col-4等类。

这些类字面意思是：

“从最小的屏幕开始，将此列保持3个单位宽，1个单位宽，4个单位宽等。”

因此，在任何屏幕尺寸下，您的列都将占用指定数量的单位。换句话说，Bootstrap的行为完全符合预期，因为您没有指定/添加任何响应列类。

在最小的屏幕（容器内），3个单位大致会产生73px。因此，在最小的屏幕上，您的col-3列的宽度仅为73px，如果您考虑每侧15px的填充，那么您实际上没有足够的空间用于任何内容。

响应式网格和列布局的文档：

https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

和

https://getbootstrap.com/docs/4.0/layout/grid/#responsive-classes

Answer 2

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

＆＃13;

Bootstrap输入组在进行更改后无响应

2 个答案: