Question

我刚刚添加了一个位于搜索结果表上方的Bootstrap面板 - 这是我第一次使用Panels。该面板包含一个带有选择菜单的表单 - 想法是用户可以进行选择以过滤搜索结果列表。

当前面板的宽度与桌子相同，而且选择菜单也非常宽 - 我想将面板的宽度减少大约1/3，并将其放在页面的中心，但不确定是否这是可能的或如何做到这一点。

这是我的HTML：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />



<div class="container">


  <div class="text-center">
    <ul class="pagination">
      <li class="disabled"><a href="#">First</a></li>
      <li class="disabled"><a href="#">Previous</a></li>
      <li><a href="?action=searchAssets&prNumber=&assetTag=&serialNumber=&assetID=AT&skip=20">Next</a></li>
      <li><a href="?action=searchAssets&prNumber=&assetTag=&serialNumber=&assetID=AT&skip=13220">Last</a></li>
    </ul>
  </div>
  <div class="text-center">
    <span class="counter-items"><span class="counter-num-items">1-20 / 13233</span></span>
  </div>

  <h1>Search Results</h1>

  <br>

  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">Filter By</h3>
    </div>
    <div class="panel-body">
      <form class="form-horizontal" id="filter" action="filter.php" method="get" role="form">
        <input type="hidden" name="action" value="filterSearch">
        <div class="form-group">
          <div class="col-sm-9">
            <select class="form-control" name="productType" id="productType">

            				<option selected="selected">By Product Type</option>
                                                          <option value="Cars">Cars</option>
                                                            <option value="Trains">Trains</option>
                                                            <option value="Planes">Planes</option>
                              
        				</select>
          </div>
        </div>
      </form>
    </div>
  </div>

Answer 1

将您的面板放在div标记内class="col-xs-offset-3 col-xs-6"。在下面找到

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

Answer 2

如果我正确理解你想要居中并将面板的宽度减少到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>

Answer 3

好像你不想在代码中使用Column Layout。尽管如此，可以减小面板的宽度并将其放置在页面的中心。您可以为Panel覆盖bootstrap的默认CSS样式。尝试将以下代码添加到<head>部分下的HTML文件中：

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

添加ID =＆＃34;面板中心＆＃34;到这一行<div class="panel panel-primary">

这可以解决您的问题，但这不是最佳解决方案。我建议使用Column Layout（Grid）。谢谢。

Bootstrap - 将面板定位在页面中心并缩小宽度

3 个答案: