Bootstrap-img标签不适合div

时间：2017-06-13 11:46:42

标签： html5 css3 twitter-bootstrap-3

我有两个div，每个div都有一个图像和段落。当我向div提供课程col-md-5时，img标签未涵盖所有div空间。我该如何解决这个问题？代码和JsFiddle正在跟随。

HTML：

<div id="recent-posts" class="center-block">
            <div class="posts col-md-5">
                <div class="posts-div">
                    <img src="https://www.w3schools.com/css/img_fjords.jpg">
                    <div class="overlay">

                        </div>
                    </div>
                <button class="btn btn-success">title</button>
                <p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
            </div>
            <div class="posts col-md-5">
                <div class="posts-div">
                    <img src="https://www.w3schools.com/css/img_fjords.jpg">
                    <div class="overlay">

                    </div>
                </div>
                <button class="btn btn-success" >title</button>
                <p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
            </div>
        </div>

的CSS：

#recent-posts{
    width: 70%;
    height: 350px;
    display: flex;
    justify-content: space-around;
    position: relative;
    margin-bottom: 100px;
}
.posts{
    width: 40%;
    height: 350px;
    margin-top: 20px;
    position: relative;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #888888;
    display: flex;
    flex-direction: column;
}
.posts img{
    width: 100%;
    height: 100%;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
}
.posts .btn-success{
    background-color: #01a89e;
    position: absolute;
    width: 50%;
    top: 227px;
    left: 24%;
    color: #101010;
    cursor: auto;
}
.posts p{
    margin-top: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.overlay {
    position: absolute;
    top: 0;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: rgba(46, 183, 175, .7);
    overflow: hidden;
    width: 100%;
    height:0;
    transition: .8s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
}
.overlay div:first-child{
    margin-left: 15px;
}
.posts-div:hover .overlay {
    bottom: 0;
    top: 0;
    height: 70%;
}
.posts-div{
    width: 100%;
    height: 70%;
}

Jsfiddle

2 个答案:

答案 0 :(得分：0)

这是因为每个Bootstrap列都有padding-left:15px padding-right:15px，因此内容保留在列内，但不包括填充。

所以你有一些解决方案。

  1. 添加一个div，其中包含列中的所有内容，并为该div提供边框

    2. 见下文或＆gt; fiddle 

    #recent-posts {
  width: 70%;
  height: 350px;
  display: flex;
  justify-content: space-around;
  position: relative;
  margin-bottom: 100px;
}

.posts {
  display: flex;
  flex-direction: column;
}

.post-container {
  height: 350px;
  margin-top: 20px;
  position: relative;
  border-radius: 5px;
  box-shadow: 1px 1px 5px #888888;
}

.posts img {
  width: 100%;
  height: 100%;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
}

.posts .btn-success {
  background-color: #01a89e;
  position: absolute;
  width: 50%;
  top: 227px;
  left: 24%;
  color: #101010;
  cursor: auto;
}

.posts p {
  margin-top: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: rgba(46, 183, 175, .7);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .8s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
}

.overlay div:first-child {
  margin-left: 15px;
}

.posts-div:hover .overlay {
  bottom: 0;
  top: 0;
  height: 70%;
}

.posts-div {
  width: 100%;
  height: 70%;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="recent-posts" class="center-block">
  <div class="posts col-md-5">
    <div class="post-container">


      <div class="posts-div">
        <img src="https://www.w3schools.com/css/img_fjords.jpg">
        <div class="overlay">

        </div>
      </div>
      <button class="btn btn-success">title</button>
      <p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
    </div>
  </div>
  <div class="posts col-md-5">
    <div class="post-container">
      <div class="posts-div">
        <img src="https://www.w3schools.com/css/img_fjords.jpg">
        <div class="overlay">

        </div>
      </div>
      <button class="btn btn-success">title</button>
      <p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
    </div>
  </div>
</div>

    1. 从paddings
      2. 中删除col-md-5

      请参阅下面的代码段或fiddle 

      #recent-posts{
    width: 70%;
    height: 350px;
    display: flex;
    justify-content: space-around;
    position: relative;
    margin-bottom: 100px;
}
.posts{
    width: 40%;
    height: 350px;
    margin-top: 20px;
    position: relative;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #888888;
    display: flex;
    flex-direction: column;
}
.posts.col-md-5 {
	padding-left:0;
	padding-right:0;
}
.posts img{
    width: 100%;
    height: 100%;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
}
.posts .btn-success{
    background-color: #01a89e;
    position: absolute;
    width: 50%;
    top: 227px;
    left: 24%;
    color: #101010;
    cursor: auto;
}
.posts p{
    margin-top: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.overlay {
    position: absolute;
    top: 0;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: rgba(46, 183, 175, .7);
    overflow: hidden;
    width: 100%;
    height:0;
    transition: .8s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
}
.overlay div:first-child{
    margin-left: 15px;
}
.posts-div:hover .overlay {
    bottom: 0;
    top: 0;
    height: 70%;
}
.posts-div{
    width: 100%;
    height: 70%;
}
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="recent-posts" class="center-block">
            <div class="posts col-md-5">
                <div class="posts-div">
                    <img src="https://www.w3schools.com/css/img_fjords.jpg">
                    <div class="overlay">
                      
                        </div>
                    </div>
                <button class="btn btn-success">title</button>
                <p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
            </div>
            <div class="posts col-md-5">
                <div class="posts-div">
                    <img src="https://www.w3schools.com/css/img_fjords.jpg">
                    <div class="overlay">
                        
                    </div>
                </div>
                <button class="btn btn-success" >title</button>
                <p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
            </div>
        </div>

      1. 一个非正统的解决方案是用30px增加图像的宽度（等于列的右边填充），然后向左移动15px以使其居中

        2. 请参阅下面的代码段或＆gt; jsfiddle 

        #recent-posts{
    width: 70%;
    height: 350px;
    display: flex;
    justify-content: space-around;
    position: relative;
    margin-bottom: 100px;
}
.posts{
    width: 40%;
    height: 350px;
    margin-top: 20px;
    position: relative;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #888888;
    display: flex;
    flex-direction: column;
}
.posts img{
    width: calc(100% + 30px);
    height: 100%;
		margin-left:-15px;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
}
.posts .btn-success{
    background-color: #01a89e;
    position: absolute;
    width: 50%;
    top: 227px;
    left: 24%;
    color: #101010;
    cursor: auto;
}
.posts p{
    margin-top: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.overlay {
    position: absolute;
    top: 0;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: rgba(46, 183, 175, .7);
    overflow: hidden;
    width: 100%;
    height:0;
    transition: .8s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
}
.overlay div:first-child{
    margin-left: 15px;
}
.posts-div:hover .overlay {
    bottom: 0;
    top: 0;
    height: 70%;
}
.posts-div{
    width: 100%;
    height: 70%;
}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="recent-posts" class="center-block">
            <div class="posts col-md-5">
                <div class="posts-div">
                    <img src="https://www.w3schools.com/css/img_fjords.jpg">
                    <div class="overlay">
                      
                        </div>
                    </div>
                <button class="btn btn-success">title</button>
                <p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
            </div>
            <div class="posts col-md-5">
                <div class="posts-div">
                    <img src="https://www.w3schools.com/css/img_fjords.jpg">
                    <div class="overlay">
                        
                    </div>
                </div>
                <button class="btn btn-success" >title</button>
                <p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
            </div>
        </div>

答案 1 :(得分：-1)

如果你想解决这个问题，我发现使用你的代码可以轻松解决问题，

附上课程：

 class="img-responsive"

对您的图片和CSS进行一些更改，如下所示：

.posts {
    width: 40%;
    height: 350px;
    margin-top: 20px;
    position: relative;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #888888;
    display: flex;
    flex-direction: column;
    padding: 0;
}

所做的更改是：Padding:0;

以JsFiddle为例

相关问题
最新问题