Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您只需在表单元素中添加更大的宽度即可。

form {
    width: 500px;
}

关于图像之间的空白，我无法真正帮助您，因为您需要包含更多标记才能看到最新情况。

Answer 2

试试这个： 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;}

更改搜索框的默认宽度

2 个答案: