Question

我有以下代码段。我基本上需要在搜索框中显示一个搜索图标，然后附上一个取消按钮。

我为图标和按钮选了2列，搜索框有8列。

<div class="row">
  <div class="input-group col-lg-12">
    <span class="input-group-addon col-lg-2">
      <i class="fa fa-search"></i>            
    </span>

    <input class="form-control col-lg-8" type="text" placeholder="Search..."/>

    <span class="input-group-addon col-lg-2 btn btn-default">
      <i class="fa fa-times"></i>
    </span>
  </div>
</div>

所以我希望一切都显示在一行没有边距，但我得到的就是这个。输入框占用所有宽度而不是8列

enter image description here

任何帮助表示赞赏。提前谢谢。

Answer 1

enter image description here

你可以设置 .input-group-addon {min-width：200px} （你想要的大小）和响应性你可以添加几个 @media screen 尺寸

Live Demo jsfiddle

 <html>
    <head>
        <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<style type="text/css">
    .input-group-addon{
         min-width:200px;
    }
    @media screen and (max-width: 768px) {
    .input-group-addon{
         min-width:100px;
    }
}
</style>
    </head>
    <body>
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-search"></i>  </span>
          <input type="text" class="form-control" placeholder="Search...">
          <span class="input-group-addon"><i class="fa fa-times"></i></span>
        </div></div>
    </body>
</html>

:)

输入文本框不响应bootstrap列系统

1 个答案: