Twitter bootstrap 引导页面标题h1在布局外部退出

我需要小幅调整页面的实际

h1

，我尝试了

CSS

，但它不起作用，我的实际

HTML

页面如下：

问题是页面的

h1

和搜索

div

超出布局，如图所示：，我如何调整此

h1

和搜索

div

的大小以不超出布局？

试试这个

  <meta charset="UTF-8">
  <title>selfmarket.net - bitcoin marketplace </title>
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="alternate" type="application/atom+xml" title="Atom" href="/atom.xml">
  <link rel="stylesheet" href="/static/css/main.css">


<style type="text/css">
  .thumbnail.product {
    position: relative;
    text-align: center;
  }
  .thumbnail.product .label {
    display: inline-block;
    margin-bottom: 5px;
  }
  .thumbnail.product .product-price {
    display: inline-block;
    border: 1px solid transparent;
    padding: 5px 10px;
    cursor: pointer;
  }
  .thumbnail.product .product-price:hover {
    border: 1px solid #CCC;
    border-radius: 5px;
  }
  .thumbnail.product .product-price:active {
    background-color: #EEE;
  }
  div.thumbnail{
    padding:0px;
  }

.thumbnailheader h3, .thumbnail p
{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.type{
  position: absolute;
  bottom: 50px;
  width: 100%;
}

</style>



  <div class="container">
    <div class="panel panel-default">
        <div class="panel-body">
      <ul class="nav nav-pills">

          <li class="pull-left">
              <a href="/"><img src="/static/logo.png" alt=""></a>
          </li>




        <li class="pull-right" >
          <div class="dropdown">
            <a href="#" class="btn dropdown-toggle" id="accountDropdownMenu" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> <strong>admin <span class="caret"></span></strong></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
              <li class="dropdown-header"> <span class="label label-success"><i class="glyphicon glyphicon-star"></i> PREMIUM MEMBER</span></li>
              <li class="divider"></li>
            <li><a role="menuitem" href="/account/seller/products.html"><i class="glyphicon glyphicon-record"></i> Products</a></li>
              <li><a role="menuitem" href="/account/messages.html"><i class="glyphicon glyphicon-envelope"></i> Messages <span class="badge badge-success">0</span></a></li>

              <li class="dropdown dropdown-submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-star"></i> Favorites</a>
                <ul class="dropdown-menu dropdown-menu-left">
                  <li><a role="menuitem" href="/account/favorites.html?state=items">Items <span class="badge badge-success">1</span></a></li>
                  <li><a role="menuitem" href="/account/favorites.html?state=search">Search <span class="badge badge-success">0</span></a></li>
                </ul>
              </li>

                <li class="divider"></li>
                <li><a role="menuitem" href="/account"><i class="glyphicon glyphicon-dashboard"></i> Dashboard</a></li>

              <li class="divider"></li>
              <li><a role="menuitem" href="/admin/"><i class="glyphicon glyphicon-cog"></i> Admin panel</a></li>

              <li class="divider"></li>
              <li><a role="menuitem" href="/logout.html"><i class="glyphicon glyphicon-log-out"></i> Logout</a></li>
            </ul>
          </div>

        </li>



        <a href="/account/add-product.html" class="btn btn-primary pull-right">Add product</a>


      </ul>
    </div></div>












<div class="row">
  <div class="page-header">

  <div class="pull-right">

    <form class="form-inline" action="/" method="GET">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search market....">
  </div>
  <button type="submit" class="btn btn-primary">Search</button>

   <div class="form-group">
     <label>Sort by:</label>
     <select class="form-control">
       <option>Date Added</option><option>Lowest Price</option>
       <option>Higher Price</option><option>Best Seller</option>
     </select>
     <button type="submit" class="btn btn-primary">Apply</button>
  </div>


</form>



    </div>

    <h1 style="font-size: 16px !important;">New
      </h1>


  </div>
</div>

<div class="row">
  <div class="col-md-2">
    <ul class="nav nav-pills nav-stacked">

        <li>
          <a href="/category/app-1.html">app
            <span class="badge pull-right">

              1

            </span>
          </a>
        </li>


        <li>
          <a href="/category/software-2.html">software
            <span class="badge pull-right">

              1

            </span>
          </a>
        </li>


        <li>
          <a href="/category/voucher-3.html">voucher
            <span class="badge pull-right">

              4

            </span>
          </a>
        </li>


    </ul>
  </div>
  <div class="col-md-10">


    <div class="row">

    <div class="col-sm-4 col-md-4 col-lg-3">


      <div class="thumbnail product">
<h5><a href="&#10;  &#10;      /product/test-product-instant-31451773490.html&#10;  &#10;">test product instant</a></h5>
        <a href="&#10;  &#10;      /product/test-product-instant-31451773490.html&#10;  &#10;">

    <p>

      <img width="200" height="200" src="/static/uploads/21/thumb.99902040-test-product-instant.jpg">

    </p>

</a>
<div class="type">
              <span class="label label-info"><i class="glyphicon glyphicon-tag"></i>voucher</span>


        <span class="label label-info"><i class="glyphicon glyphicon-user"></i> admin</span>
</div>
<div class="panel-footer">
2.99 $
</div>

      </div>

    </div>


    <div class="col-sm-4 col-md-4 col-lg-3">


      <div class="thumbnail product">
<h5><a href="&#10;  &#10;      /product/test-product-3-29849702103.html&#10;  &#10;">test product 3</a></h5>
        <a href="&#10;  &#10;      /product/test-product-3-29849702103.html&#10;  &#10;">

    <p>

      <img width="200" height="200" src="/static/uploads/20/thumb.46571031-test-product-3.jpg">

    </p>

</a>
<div class="type">
              <span class="label label-info"><i class="glyphicon glyphicon-tag"></i>voucher</span>


        <span class="label label-info"><i class="glyphicon glyphicon-user"></i> admin</span>
</div>
<div class="panel-footer">
1.99 $
</div>

      </div>

    </div>


    <div class="col-sm-4 col-md-4 col-lg-3">


      <div class="thumbnail product">
<h5><a href="&#10;  &#10;      /product/am-pula-mare-28516158108.html&#10;  &#10;">am pula mare</a></h5>
        <a href="&#10;  &#10;      /product/am-pula-mare-28516158108.html&#10;  &#10;">

    <p>

      <img width="200" height="200" src="/static/uploads/19/thumb.06597352-am-pula-mare.jpg">

    </p>

</a>
<div class="type">
              <span class="label label-info"><i class="glyphicon glyphicon-tag"></i>voucher</span>


        <span class="label label-info"><i class="glyphicon glyphicon-user"></i> admin</span>
</div>
<div class="panel-footer">
1.99 $
</div>

      </div>

    </div>


    <div class="col-sm-4 col-md-4 col-lg-3">


      <div class="thumbnail product">
<h5><a href="&#10;  &#10;      /product/cauciucuri-de-top-25230388155.html&#10;  &#10;">cauciucuri de top</a></h5>
        <a href="&#10;  &#10;      /product/cauciucuri-de-top-25230388155.html&#10;  &#10;">

    <p>

      <img width="200" height="200" src="/static/uploads/17/thumb.36770781-cauciucuri-de-top.jpg">

    </p>

</a>
<div class="type">
              <span class="label label-info"><i class="glyphicon glyphicon-tag"></i>voucher</span>


        <span class="label label-info"><i class="glyphicon glyphicon-user"></i> admin</span>
</div>
<div class="panel-footer">
1.99 $
</div>

      </div>

    </div>


    <div class="col-sm-4 col-md-4 col-lg-3">


      <div class="thumbnail product">
<h5><a href="&#10;  &#10;      /product/product-4-24820861725.html&#10;  &#10;">product 4</a></h5>
        <a href="&#10;  &#10;      /product/product-4-24820861725.html&#10;  &#10;">

    <p>

      <img width="200" height="200" src="/static/uploads/16/thumb.02556996-product-4.jpg">

    </p>

</a>
<div class="type">
              <span class="label label-info"><i class="glyphicon glyphicon-tag"></i>app</span>


        <span class="label label-info"><i class="glyphicon glyphicon-user"></i> admin</span>
</div>
<div class="panel-footer">
1.00 $
</div>

      </div>

    </div>


    <div class="col-sm-4 col-md-4 col-lg-3">


      <div class="thumbnail product">
<h5><a href="&#10;  &#10;      /product/product-111-22234646298.html&#10;  &#10;">product 111</a></h5>
        <a href="&#10;  &#10;      /product/product-111-22234646298.html&#10;  &#10;">

    <p>

      <img width="200" height="200" src="/static/uploads/15/thumb.91861739-product-111.jpg">

    </p>

</a>
<div class="type">
              <span class="label label-info"><i class="glyphicon glyphicon-tag"></i>software</span>


        <span class="label label-info"><i class="glyphicon glyphicon-user"></i> admin</span>
</div>
<div class="panel-footer">
1.00 $
</div>

      </div>

    </div>


    </div>


  <nav>
    <ul class="pagination">


    </ul>
  </nav>

  </div>
</div>


    <br><br>
    <div class="panel panel-default">
      <div class="panel-body">
        <div> © 2016 
          <a href="/">selfmarket.net</a> /
          <a href="/atom.xml">RSS Feed</a> /
          <a href="/static/sitemap.xml">sitemap.xml</a>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="/static/js/jquery-1.11.2.js"></script>
  <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
  <script type="text/javascript">
    $(function () {
      var messagesPopover = $('#btnToggleMessagesPopover'),
          messagesPopoverTemplate = $('#btnToggleMessagesPopoverTemplate');

      $('#btnToggleMessagesPopover').popover({
        template: messagesPopoverTemplate.html(),
        content: messagesPopover.next().html(),
        title: 'Messages'
      });

      var notificationsPopover = $('#btnToggleNotificationsPopover'),
          notificationsPopoverTemplate = $('#btnToggleNotificationsPopoverTemplate');

      $('#btnToggleNotificationsPopover').popover({
        template: notificationsPopoverTemplate.html(),
        content: notificationsPopover.next().html(),
        title: 'Notifications'
      });
    });
  </script>

<script type="text/javascript">
  $(function() {
    $('.product-price').on('click', function(e) {
      e.preventDefault();

      var $hidden = $(this).find('.hide');
      $(this).find('.show').removeClass('show').addClass('hide');
      $hidden.removeClass('hide').addClass('show');
    });
  });
</script>



<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-86740209-1', 'auto');
  ga('send', 'pageview');

</script>

selfmarket.net-比特币市场
.产品{
位置：相对位置；
文本对齐：居中；
}
.产品.标签{
显示：内联块；
边缘底部：5px；
}
产品价格{
显示：内联块；
边框：1px实心透明；
填充物：5px10px；
光标：指针；
}
.缩略图.产品.产品价格：悬停{
边框：1px实心#CCC；
边界半径：5px；
}
.缩略图.产品.产品价格：活动{
背景色：#EEE；
}
分区缩略图{
填充：0px；
}
.thumbnailheader h3、.Thumbnailp
{
文本溢出：省略号；
空白：nowrap；
溢出：隐藏；
}
.类型{
位置：绝对位置；
底部：50px；
宽度：100%；
}





高级会员


















搜寻
排序方式：
加日期最低价格
高价畅销书
申请
新的








代金券
管理
2.99 $
代金券
管理
1.99 $
代金券
管理
1.99 $
代金券
管理
1.99 $
应用程序
管理
1.00 $
软件
管理
1.00 $





© 2016 
/
/
$（函数（）{
var messagesPopover=$（“#btnToggleMessagesPopover”），
MessagesPoverTemplate=$（'btntoggleMessagesPoverTemplate'）；
$（'#btntogleMessagesPopover'）。popover({
模板：MessagesPoverTemplate.html（），
内容：messagesPopover.next（）.html（），
标题：“消息”
});
var NotificationsPover=$（“#btntoglenotificationsPover”），
NotificationsPoverTemplate=$（“#btontoglenotificationsPoverTemplate”）；
$（'#btntoglenotificationspopover'）.popover({
模板：NotificationsPoverTemplate.html（），
内容：notificationsPopover.next（）.html（），
标题：“通知”
});
});
$（函数（）{
$（'.product price'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var$hidden=$（this.find（'.hide'）；
$（this）.find（'.show'）.removeClass（'show'）.addClass（'hide'）；
$hidden.removeClass（'hide'）.addClass（'show'）；
});
});
（函数（i，s，o，g，r，a，m）{i['GoogleAnalyticsObject']=r；i[r]=i[r]| |函数（）{
（i[r].q=i[r].q | |[]）.push（参数）}，i[r].l=1*新日期（）；a=s.createElement（o），
m=s.getElementsByTagName（o）[0]；a.async=1；a.src=g；m.parentNode.insertBefore（a，m）
})（窗口、文档、“脚本”和https://www.google-analytics.com/analytics.js","ga",；
ga（“创建”、“UA-86740209-1”、“自动”）；
ga（‘发送’、‘页面浏览’）；

第60行添加“行”类

第120行删除“行”类

---

这是因为引导需要类的层次结构才能使填充保持一致。

在第120行，您需要删除

行

类

这是因为row类有一个负的边距，只有在后面跟一个

col-*

元素时才需要它