1

我需要创建一个页面，该页面在页面中心有一个搜索框，在该页面下方我需要使用引导框架在 2 行和 3 列中显示一些 6 个缩略图。

注意：整个页面内容应该出现在页面的中心

4

3 回答 3

2 
<div class=" container col-md-12 col-xs-12 abc">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Enter Keyword">
        <span class="input-group-btn">
            <button class="btn btn-info" type="button">Search</button>
        </span>
    </div>
</div>
    <div class="container col-md-12 abc">
              <img src = "http://dummyimage.com/100x100/000/fff.jpg&text=Dummy+Image" class="image col-md-4 col-xs-4">
              <img src = "http://dummyimage.com/100x100/000/fff.jpg&text=Dummy+Image" class="image col-md-4 col-xs-4">
              <img src = "http://dummyimage.com/100x100/000/fff.jpg&text=Dummy+Image" class="image col-md-4 col-xs-4">
    </div>
    <div class="container col-md-12 abc">
              <img src = "http://dummyimage.com/100x100/000/fff.jpg&text=Dummy+Image" class="image col-md-4 col-xs-4">
              <img src = "http://dummyimage.com/100x100/000/fff.jpg&text=Dummy+Image" class="image col-md-4 col-xs-4">
              <img src = "http://dummyimage.com/100x100/000/fff.jpg&text=Dummy+Image" class="image col-md-4 col-xs-4">
    </div>

您只需在 css 中添加一个额外的样式：

.abc{
    padding : 20px;
}

这是最简单的方法，也是最完美的方法。一切正常。祝你好运。

于 2013-12-18T06:05:29.317 回答
1

使用带有搜索控件和缩略图的偏移类。例如：

<div class="offsetX">
//Search control.
</div>

X 可以是数字 1-12

于 2013-10-25T07:45:19.620 回答
1

像这样的东西？下面的代码使用 bootstrap 3.0

 <div class="container text-center">
    <div class="col-lg-12">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search term">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">Go!</button>
            </span>
        </div>
    </div>
    <div class="col-lg-12 text-center">
        <div class="col-lg-4 col-md-4 col-sm-4"><img src="http://www.bio.umass.edu/micro/nusslein/images/people/no_photo.jpg" /></div>
        <div class="col-lg-4 col-md-4 col-sm-4"><img src="http://www.bio.umass.edu/micro/nusslein/images/people/no_photo.jpg" /></div>
        <div class="col-lg-4 col-md-4 col-sm-4"><img src="http://www.bio.umass.edu/micro/nusslein/images/people/no_photo.jpg" /></div>
    </div>
    <div class="col-lg-12 text-center">
        <div class="col-lg-4 col-md-4 col-sm-4"><img src="http://www.bio.umass.edu/micro/nusslein/images/people/no_photo.jpg" /></div>
        <div class="col-lg-4 col-md-4 col-sm-4"><img src="http://www.bio.umass.edu/micro/nusslein/images/people/no_photo.jpg" /></div>
        <div class="col-lg-4 col-md-4 col-sm-4"><img src="http://www.bio.umass.edu/micro/nusslein/images/people/no_photo.jpg" /></div>
    </div>
</div>
于 2013-11-11T13:23:21.130 回答