Question

在此example中，您可以看到，当我们向下滚动时，搜索字段会获得较大的宽度。如果我删除标签（带有搜索标志符号图标） - 全部正常工作。我和其他标签一样遇到了同样的问题，比如.panel-group，.panel-heading和e.t.c等其他元素类。我该如何解决？

HTML code：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
  .affix {
      top: 20px;
}
</style>

<body>
<div class="container-fluid" style="background-color:#2196F3;color:#fff;height:200px;">
  <h1>Bootstrap Affix Example</h1>
</div>
<br>

<div class="container">
  <div class="row">
    <nav class="col-sm-3">
      <div class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
        <div class="input-group">
            <i class="input-group-addon glyphicon glyphicon-search"></i>
            <input name="search" type="text" class="form-control" placeholder="search">
        </div>
        <li>TEST 1</li>
        <li>TEST 2</li>
        <li>TEST 3</li>
      </div>
    </nav>
    <div class="col-sm-9">   
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
    </div>
  </div>
</div>

</body>

Answer 1

解决这个问题的一种方法是添加left: 15px; right: 15px;以匹配父col的填充，这是在没有粘贴元素时控制宽度的原因。

＆＃13;

<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
  .affix {
    top: 20px;
    left: 15px;
    right: 15px;
  }
</style>

<body>

  <div class="container-fluid" style="background-color:#2196F3;color:#fff;height:200px;">
    <h1>Bootstrap Affix Example</h1>
    <h3>Fixed (sticky) vertical sidenav on scroll</h3>
    <p>Scroll this page to see how the left navigation menu behaves with data-spy="affix".</p>
    <p><strong>The left menu sticks to the page when you have scrolled a specified amount of pixels.</strong></p>
  </div>
  <br>

  <div class="container">
    <div class="row">
      <nav class="col-sm-3">
        <div class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
          <div class="input-group">
            <i class="input-group-addon glyphicon glyphicon-search"></i>
            <input name="search" type="text" class="form-control" placeholder="search">
          </div>
          <li>TEST 1</li>
          <li>TEST 2</li>
          <li>TEST 3</li>
        </div>
      </nav>
      <div class="col-sm-9">
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
      </div>
    </div>
  </div>

</body>

</html>

＆＃13;

使用.affix

1 个答案: