Html 引导-将面板放置在页面中央并减小宽度

我刚刚添加了一个位于搜索结果表上方的引导面板——这是我第一次使用面板。该面板包括一个带有选择菜单的表单，用户可以进行选择，从而过滤搜索结果列表

目前，面板的宽度与表格的宽度相同，选择菜单也非常宽-我想将面板的宽度减少约1/3，并将其置于页面中央，但不确定是否可能或如何做到这一点

以下是我的HTML：

1-20 / 13233
搜索结果


过滤
按产品类型
汽车
火车
飞机

如果我理解正确，您希望将面板的宽度居中并减小到1/3

因此，您应该在面板中添加一个id（panel1）并添加css

<div id ="panel1" class="panel panel-primary">

<style>
  #panel1 {
    width:30%; 
    height:auto;
    margin:0 auto;
    text-align:center;
  }
</style>  

#小组1{
宽度：30%；
高度：自动；
保证金：0自动；
文本对齐：居中；
}

似乎您不想在代码中使用列布局。尽管如此，还是可以减小面板的宽度并将其放置在页面的中心。您可以覆盖引导面板的默认CSS样式。尝试将以下代码添加到HTML文件的

部分：

<style>
  #panel-center{
    width: 20%;
    margin: 0 auto;
    }
</style>

#面板中心{
宽度：20%；
保证金：0自动；
}

将id=“面板中心”添加到此行

这可以解决您的问题，但不是最佳解决方案。我建议使用柱布局（网格）。

---

谢谢。

将您的面板放入带有

class=“col-xs-offset-3 col-xs-6”的
div
标签中。在下面找到

 <div class=" col-xs-offset-3 col-xs-6">
    <div class="panel panel-primary">
         ----
    </div>
 <div>


----