Question

我想要完成这样的事情：

到目前为止，经过数小时的学习训练和使用网格系统后，我设法做到了这一点：

我使用的代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="row-fluid">
            <div class="col-md-4">
              <img class="img-responsive" src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTUxMDc1OTAzM15BMl5BanBnXkFtZTgwOTMwOTMyMDI@._V1_SY1000_CR0,0,674,1000_AL_.jpg" style="width: 130px; height: 200px">
            </div>
            <div class="col-md-8">
              <div class="row">
                <div class="text-title">Logan 2017</div>
                <p>
                  Set in the future, Logan and Professor Charles Xavier must cope with the loss of the X-Men when a corporation lead by Nathaniel Essex is bent on destroying the world. With Logan's healing ...
                </p>
              </div>
              <div class="row">
                <button class="btn btn-warning btn-bold-text">IMDb</button>
                <button class="btn btn-danger pull-right"><span class="glyphicon glyphicon-remove"></span></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

正如您所看到的，我希望能够将图片最大化到面板的大小，使按钮粘到底部并修复文本边缘。

有人能帮助我吗？谢谢！

我不需要任何人为我做代码，只需告诉我应该寻找什么。引导程序中的列之间是否有任何间距？我尝试使用边距和填充，但没有机会完成我想要的东西。

Answer 1

https://jsfiddle.net/0jv537r0/1/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="well" style="position: relative; background: #fff;">
        <div class="row">
          <div class="col-xs-4">
            <img class="img-responsive" src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTUxMDc1OTAzM15BMl5BanBnXkFtZTgwOTMwOTMyMDI@._V1_SY1000_CR0,0,674,1000_AL_.jpg">
          </div>
        <div class="col-xs-8">
         <div class="text-title">Logan 2017</div>
         <p>
         Set in the future, Logan and Professor Charles Xavier must cope with the loss of the X-Men when a corporation lead by Nathaniel Essex is bent on destroying the world. With Logan's healing ...
         </p>
         </div>
         </div>
         <button class="btn btn-warning btn-bold-text" style="position: absolute; bottom: 20px; left: 33.33333333%;">IMDb</button>
                <button class="btn btn-danger pull-right" style="position: absolute; bottom: 20px; right: 20px;"><span class="glyphicon glyphicon-remove"></span></button>
         </div>
    </div>
  </div>
</div>

因此，我将其更改为井而不是面板，因为您实际上并未使用边框以外的任何面板元素。我的答案不是100％全面证明，你想要不是内联的样式，并为不同的屏幕宽度添加细节，但简而言之，至少你可以看到我做了什么来实现你的目标。您也可以使用flexbox，然后将按钮保留在col-xs-8内，因为使用felxbox可以使col-xs-8元素的高度与图像的高度相匹配。

你的“问题”是一个共同问题。将元素放置在父元素的底部。通常没有开箱即用的解决方案来实现这一目标。你必须使用绝对位置。此位置元素基于其最近的非静态父级。您可以在col-xs-8元素上执行此操作，但因为它的高度与图像的高度不匹配，所以无法操作，您需要将按钮移动到列外。（默认情况下，Bootstrap中的列具有非静态位置。）

现在有无数种方法可以完成你想要的东西我只是选择了你所拥有的路线壁橱。我可能会建议将media对象（http://getbootstrap.com/components/#media）本机化为bootstrap。将媒体元素包裹在带边框的包装中，你应该接近你想要的，但实际上，媒体，面板，它们都是相似的。这就是为什么在Bootstrap 4中它们全都被移除而取而代之的是卡片。你最好也选择BS4。它越来越接近发布，我有一个完全使用当前alpha的网站，它非常可靠。我们也准备将项目推向生产。

用于显示图片旁边的文字和按钮的布局

1 个答案: