边框内的响应图像和文本

时间：2016-12-23 07:39:17

标签： html css bootstrap-modal

有问题样式边框。

What i want to achieve

What i have now

HTML代码

<div class="container">
    <div class="col-sm-12 row">
        <div class="col-sm-2 thumbnail">
            <img class="img-responsive" src="images/ac/row_ac001_m0.jpg">
            <div class="caption">
                <p align="center"><b>Model No.Row-AC-001</b></p>
            </div>
        </div>

        <img class="col-sm-2 img-responsive" src="images/ac/row_ac002_m0.jpg">
        <img class="col-sm-2 img-responsive" src="images/ac/row_ac003_m0.jpg">
<!---continues------>
    </div>
</div>

我的CSS 

    .thumbnail {
    border:1px;
    width:15%;
    border-style:solid;
}

4 个答案:

答案 0 :(得分：0)

以这种方式使用HTML：

<div class="container">
    <div class="row">

        <div class="col-sm-2">
            <div class="thumbnail">
                <img class="img-responsive" src="images/ac/row_ac002_m0.jpg">
                <div class="caption">
                    <p align="center"><b>Model No.Row-AC-001</b></p>
                </div>
            </div>
        </div><!-- First col -->

        <div class="col-sm-2">
            <div class="thumbnail">
                <img class="img-responsive" src="images/ac/row_ac002_m0.jpg">
                <div class="caption">
                    <p align="center"><b>Model No.Row-AC-001</b></p>
                </div>
            </div>
        </div><!-- Second col -->

    </div>
</div>

使用CSS：

.thumbnail {
     border:1px solid #ccc;
 }

答案 1 :(得分：0)

.thumbnail{
 		border: thin gray solid;
 		border-radius: 0px !important;
 		margin: 0 5px;
 	}

 	.image_size{
 		width: 150px;
 		height: 150px;
 		display: block;
 	}

p{
  font-size:12px;
  }
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 


<div class="container">
  <div class="row">
    <div class="col-md-2 col-sm-4 col-xs-6 ">
    	<div class="thumbnail">
        	<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
          <p class="text-center">Your Text</p>
        </div>
    </div>

 <div class="col-md-2 col-sm-4 col-xs-6 ">
    	<div class="thumbnail">
        	<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
          <p class="text-center">Your Text</p>
        </div>
    </div>

 <div class="col-md-2 col-sm-4 col-xs-6 ">
    	<div class="thumbnail">
        	<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
          <p class="text-center">Your Text</p>
        </div>
    </div>

 <div class="col-md-2 col-sm-4 col-xs-6 ">
    	<div class="thumbnail">
        	<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
          <p class="text-center">Your Text</p>
        </div>
    </div>

 <div class="col-md-2 col-sm-4 col-xs-6 ">
    	<div class="thumbnail">
        	<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
          <p class="text-center">Your Text</p>
        </div>
    </div>

 <div class="col-md-2 col-sm-4 col-xs-6 ">
    	<div class="thumbnail">
        	<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
          <p class="text-center">Your Text</p>
        </div>
    </div>

    </div>


<div class="row">
    <div class="col-md-2 col-sm-4 col-xs-6 ">
    	<div class="thumbnail">
        	<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
          <p class="text-center">Your Text</p>
        </div>
    </div>

 <div class="col-md-2 col-sm-4 col-xs-6 ">
    	<div class="thumbnail">
        	<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
          <p class="text-center">Your Text</p>
        </div>
    </div>

 <div class="col-md-2 col-sm-4 col-xs-6 ">
    	<div class="thumbnail">
        	<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
          <p class="text-center">Your Text</p>
        </div>
    </div>

 <div class="col-md-2 col-sm-4 col-xs-6 ">
    	<div class="thumbnail">
        	<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
          <p class="text-center">Your Text</p>
        </div>
    </div>

 <div class="col-md-2 col-sm-4 col-xs-6 ">
    	<div class="thumbnail">
        	<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
          <p class="text-center">Your Text</p>
        </div>
    </div>

 <div class="col-md-2 col-sm-4 col-xs-6 ">
    	<div class="thumbnail">
        	<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
          <p class="text-center">Your Text</p>
        </div>
    </div>

    </div>


    </div>

PS ：根据需要更改图片尺寸。

这是JSFiddle

希望这有帮助。

答案 2 :(得分：0)

根据您提供的照片。

屏幕越宽，每行的项目越多。

＆＃13;
＆＃13; 
.myitem {
  display: inline-block;
  width: 200px;
  max-height: 310px;
  border: 1px solid #fff;
}
.mycoolcontainer,
.myitem {
  margin: .4em;
}
img,
.mycoolcontainer,
.myitem {
  max-width: 100%;
}
body {
  background: #131418;
  color: #999;
  text-align: center;
}
＆＃13; 
<div class="mycoolcontainer">
  <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
  <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
  <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
  <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
  <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
  <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
  <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
  <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
  <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
  <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
  <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
    <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
  <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
  <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
  <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
  <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
  <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
  <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
  <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
  <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
  <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
  <div class="myitem">
    <img src="http://placehold.it/200x200">Title
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

我已更改您的代码并在下面添加。我希望这能帮助你解决问题。

形成应该是这样的，网格大小根据您的要求。您可以更改网格大小。

<强> HTML 

<div class="row">
<div class="col-sm-2 col-md-2">
  <div class="thumbnail">
    <img src="https://cdn.pixabay.com/photo/2016/12/22/05/41/muang-sing-historical-park-1924558__340.jpg" alt="...">
    <div class="caption">
      <p class="text-center">Row-AC-001</p>
    </div>
  </div>
</div>

<强> CSS 

.thumbnail img {
 max-width: 150px;
}

.thumbnail .caption {
 padding-top: 9px;
}

附加了Codepen链接，

http://codepen.io/WebTechie/pen/vyMqdY

相关问题
最新问题