更改搜索框的默认宽度

Question

我是 bootstrap 新手，目前需要更改搜索框的宽度。我也想给它一个空间，因为它在一个容器中，但是搜索框和按钮正在触摸上面的图片和下面的导航栏，它看起来不太好。我使用&nbsp 来修补它，但它留下了一个非常不好的巨大差距。这是我的 CSS 和 HTML。 JS 文件和 CSS 文件都是从 bootstrap 本身下载的默认文件。任何指针都会有所帮助

.form-inline .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle
}

.form-inline .form-control-plaintext {
  display: inline-block
}

.form-inline .input-group {
  width: auto
}

.form-inline .form-check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: auto;
  padding-left: 0
}

.form-inline .form-check-input {
  position: relative;
  margin-top: 0;
  margin-right: .25rem;
  margin-left: 0
}

.form-inline .custom-control {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.form-inline .custom-control-label {
  margin-bottom: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Search -->
<form class="form-inline ">
  <input class="form-control mr-sm-2 " type="search" placeholder="I'M LOOKING FOR..." aria-label="Search">
  <button class="btn btn-pnpsample my-2 my-sm-0 " type="submit">Search</button>
</form>
<!-- End search -->

Answer 1

试试这个： HTML

<div class="searchcont">
    <form class="form-inline ">
      <input class="form-control mr-sm-2 " type="search" placeholder="I'M LOOKING FOR..." aria-label="Search">
      <button class="btn btn-pnpsample my-2 my-sm-0 " type="submit">Search</button>
    </form>
</div>

CSS

.searchcont{margin-top: 50px;}

Answer 2

您可以为表单元素添加更大的宽度。

form {
    width: 500px;
}

关于图像之间的空白，我无法真正帮助您，因为您需要包含更多标记才能看到发生了什么。