Question

我在使用bootstraps输入组时遇到问题。在较大的窗口大小，类＆＃39;输入组-btn＆＃39;宽度继续增长，使搜索栏偏离中心。我尝试在该元素上设置最大宽度但是没有用。我也试过浮动这些元素，然后把它们放在一排，但没有任何东西对我有效。

使用btn-group-justified填充该空间，但并不是我真正想要的。

我无法发布图片，但这里是link to one。

＆＃13;

html,
body {
  height: 100%;
  background-color: #666699;
}
.well {
  background-color: #ffffee
}
#content {
  padding: 25% 25% 5%;
}
.search-form {
  border-radius: 30px 0 0 30px;
}
.input-group {
  width: 100%;
}
span.input-group-btn {
  max-width: 38px;
}
#search {
  border: 1px;
}
.search-btn {
  cursor: pointer;
  border-radius: 0 30px 30px 0;
  background-color: #fff;
  color: #669;
}
.text-center {
  color: #fff;
}

＆＃13;

<body>
  <div class="container">
    <div id="content">
      <form class='form-inline'>
        <div class="input-group">
          <input type='text' id='search' class="form-control search-form" placeholder="Scooby Doo">
          <span class="input-group-btn">
              <button id="search-this"type="button" class="btn btn-default search-btn">
                  <i class="fa fa-search"></i>
              </button>
            </span>
        </div>
      </form>

      <p class="text-center">Some centered text</p>


    </div>
  </div>
</body>

＆＃13;

Answer 1

我修好了！继承人我做了什么：

将跨度的内嵌样式设置为宽度：39px
在按钮

Bootstrap input-group-btn具有额外的宽度，使得事物偏离中心

1 个答案: