0

我想用 twitter bootstrap 创建一个 ui 布局。我想要实现的是拥有一个缩略图列表，这些缩略图将成为选项卡内的搜索结果。但是除了第一行之外，其他行只有 3 个项目。我不擅长css。所以请帮助实现这个布局。

<div class="container-fluid">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="#">Title</a>
                <div class="nav-collapse collapse navbar-responsive-collapse">
                    <ul class="nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li class="nav-header">Nav header</li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-search pull-left" action="#">
                        <input type="text" class="search-query span5" placeholder="Search">
                    </form>
                    <ul class="nav pull-right">
                        <li><a href="#">Link</a></li>
                        <li class="divider-vertical"></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.nav-collapse -->
            </div>
        </div>
        <!-- /navbar-inner -->
    </div>

    <ul class="breadcrumb">
        <li><a href="#">Home</a> <span class="divider">/</span></li>
        <li><a href="#">Library</a> <span class="divider">/</span></li>
        <li class="active">Data</li>
    </ul>

    <div class="row-fluid">
        <div class="span2">
            <form class="form">
                <!-- Text input-->
                <div class="control-group">
                    <label class="control-label" for="brandName">Brand</label>
                    <div class="controls">
                        <input id="brandName" name="brandName" type="text" placeholder="Enter the brand name of the item" class="input-large" data-bind="TypeAhead: { source: brandSuggestions, minLength: 2 }, value: brand">
                        <p class="inputError" data-bind="validationMessage: brand"></p>
                    </div>
                </div>

                <!-- Button Drop Down -->
                <div class="control-group">
                    <label class="control-label" for="itemCategory">Item Category</label>
                    <div class="controls">
                        <div>
                            <select class="combobox" id="itemCategory" data-placeholder="Select an Item Category" data-bind="options: itemCategory, value: selectedItemCategory"></select>
                        </div>
                        <p class="inputError" data-bind="validationMessage: itemCategory"></p>
                    </div>
                </div>

                <!-- Button Drop Down -->
                <div class="control-group">
                    <label class="control-label" for="itemSubCategory">Item Sub Category</label>
                    <div class="controls">
                        <div>
                            <select class="combobox" id="itemSubCategory" data-placeholder="Select an Item SubCategory" data-bind="options: itemSubCategory, value: selectedItemSubCategory"></select>
                        </div>
                        <p class="inputError" data-bind="validationMessage: itemSubCategory"></p>
                    </div>
                </div>

                <!-- Range Slider-->
                <div class="control-group">
                    <label class="control-label" for="rating">Rating</label>
                    <div id="rating"></div>
                </div>

                <!-- Button Drop Down -->
                <div class="control-group">
                    <label class="control-label" for="itemCondition">Item Condition</label>
                    <div class="controls">
                        <div>
                            <select class="combobox" id="itemCondition" data-placeholder="Select an Item Condition" data-bind="options: itemCondition, value: selectedItemCondition"></select>
                        </div>
                        <p class="inputError" data-bind="validationMessage: itemCondition"></p>
                    </div>
                </div>

                <div class="control-group">
                    <div class="controls">
                        <label class="checkbox">
                            <input type="checkbox">
                            Has an Image
                        </label>
                    </div>
                </div>

                <!-- Button Drop Down -->
                <div class="control-group">
                    <label class="control-label" for="soldBy">Sold By</label>
                    <div class="controls">
                        <div>
                            <select class="combobox" id="soldBy" data-placeholder="Select items Sold By" data-bind="options: soldBy, value: selectedSoldBy"></select>
                        </div>
                        <p class="inputError" data-bind="validationMessage: soldBy"></p>
                    </div>
                </div>

                <input type="button" class="btn" data-bind="click: filter" value="Filter Search" />
            </form>
        </div>
        <div class="span10">
            <p>Something about the search.</p>
            <div class="tabbable tabs-right">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#rA" data-toggle="tab">Tab1</a></li>
                    <li><a href="#rB" data-toggle="tab">Tab2</a></li>
                    <li><a href="#rC" data-toggle="tab">Tab3</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="rA">
                        <ul class="thumbnails">
                            <li class="span3">
                                <div class="thumbnail">
                                    <img data-src="holder.js/300x200" alt="300x200" style="width: 300px; height: 200px;" src="data:image/png;base64,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">
                                    <div class="caption">
                                        <h3>Thumbnail label</h3>
                                        <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </div>
                    <div class="tab-pane" id="rB">
                        <div data-bind="compose: 'viewmodels/checkInList'"></div>
                    </div>
                    <div class="tab-pane" id="rC">
                        <div data-bind="compose: 'viewmodels/buyList'"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

附上截图 在此处输入图像描述

4

1 回答 1

0

如果您希望在 span10 中包含七个缩略图，您应该连续包含三个 .span3 缩略图类，因为四个 span3 类构成 span12，它们不适合 span10。因此，如果您关注 span10 部门，请连续保持三个 span3 类。

解决问题时，将三个缩略图包含在一个行 div 中，然后是另一个具有三个缩略图的行 div，最后是一个包含一个缩略图的 div。

结构如下所示：

<!-- 3 thumbnail div's in first row-->
<div class="span10">
 ......
 <div class="row">
   <ul class="thumbnails">
      <li class="span3">
         <div class="thumbnail">
            <img ...>
            <div class="caption">
            <h3>Thumbnail label</h3>
            <p>
                 <a href="#" class="btn btn-primary">Action</a> 
                 <a href="#"class="btn">Action</a>
            </p>
         </div>
      </li>
      <li class="span3">
         ...
      </li>
      <li class="span3">
         ...
      </li>
    </ul>
</div>
<!-- followed by 3 thumbnail div's in second row -->
<div class="row">
   <ul class="thumbnails">
      <li class="span3">
         ...
      </li>
      <li class="span3">
         ...
      </li>
      <li class="span3">
         ...
      </li>
    </ul>
<!-- followed by 1 thumbnail div's in second row -->
<div class="row">
   <ul class="thumbnails">
      <li class="span3">
         ...
      </li>
    </ul>
 </div>
</div>

希望这可以帮助。

于 2013-08-07T15:36:51.187 回答