Question

标题可能会产生误导，但我不知道如何命名。在任何情况下，我都需要一个带文本的div / image，以及该文本下面的按钮。问题是，无论我尝试什么，我都无法在不添加任何填充的情况下使按钮占据整个宽度。

为了使我的解释更清楚，这里是我想要做的图像：

我正在尝试仅使用Bootstrap 4实用程序。到目前为止，这是我的代码：

.col-md-3 {
  background-color: #ededed;
}
.img {
  width: 188px;
  height: 88px;
  background-color: #292a2c;
}
.btn {
  background-color: #292a2c;
  color: #ededed;
}

<div class="col-md-3 d-flex p-0">
  <div class="img"></div>
    <div>
      <h6 class="m-auto">Text goes here</h6>
      <button class="btn rounded-0 btn-block">Button</button>
    </div>
</div>

我该如何使这项工作？另外，带有.img类的div在某种程度上是占位符，需要保持这种状态。

谢谢！

Answer 1

您可以通过使用引导媒体对象而不使用其他CSS来实现此目的。请参见下面的代码段

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="media">
        <img src="https://via.placeholder.com/188x88" class="mr-3" alt="">
        <div class="media-body">
          <h5 class="mt-0">Media heading</h5>
          <button class="btn btn-primary btn-block">Button</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

你可以试试这样的东西，然后相应地设计它：

<div class="container-fluid">
  <div class="row">
    <div class="col-4">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ79Qe630Fli9-SIDz188GQURmrRfhh6AksMKexPP5JvsE7AJ6t01mf5A">
    </div>
    <div class="col-8">
      <div class="row">
        <p>text</p>
      </div>
      <div class="row">
        <button>button</button>
      </div>
    </div>
  </div>
</div>

Answer 3

以下是获取图片所示的代码

'<div class="col-md-12"><div class="row"><div class="col-md-3"><div class="row"><div class="img"></div></div></div>
<div class="col-md-6"><div class="row">
 <h6 class="m-auto">Text goes here</h6><button class="btn rounded-0 btn-block">Button</button></div></div></div>

对于样式，请使用问题中的样式

Answer 4

你可以这样做。

请注意，默认情况下，Bootstrap没有黑色背景类，因此您必须创建一个。

＆＃13;

.bg-black {
  background-color: #000 !important;
  border: 2px solid #000 !important;
 }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container-fluid">      <!-- Make it full width -->
  <div class="row d-flex">         <!-- display flex -->
    <div class="col-4 align-self-stretch">      <!-- stretch the column -->
      <img class="w-100" src="http://placehold.it/200x200" />
    </div>
    <div class="col-8 align-self-stretch">      <!-- stretch the column -->
      <p>Some Text Here.<br/> Can be long or short</p>
      <p>Yet another paragraph</p>
      <p>And one more paragraph</p>
      <button class="btn btn-primary bg-black btn-block rounded-0">Btn Txt</button>
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

＆＃13;

Answer 5

＆＃13;

   .col-md-3 {
      background-color: #ededed;
      width:100% !important;
      
    }
    
   .col-md-3> div{
    display:inline-block;
    float:left;
     width: 60%;
     height:100%;
    }
    .img {
      width: 15% !important;;
      height: 88px !important;
      background-color: #292a2c;
      display:inline-block;
    }
    
    .btn {
      width: 60%;
      background-color: #292a2c;
      color: #ededed;
      height:50%;
      display:inline-block;
    }

＆＃13;

<div class="col-md-3 d-flex p-0">
  <div class="img"></div>
    <div>
      <h6 class="m-auto">Text goes here</h6>
      <button class="btn rounded-0 btn-block">Button</button>
    </div>
</div>

＆＃13;

Answer 6

一切看起来都不错只要确保你在正确的地方有bootstrap.css文件，并确保它正常工作。

我对你的代码进行了一些更改，它有点硬编码，但是你必须注意覆盖bootstrap类并且不要直接更改它们。

＆＃13;

.box {
  background-color: #ededed;
}
.img {
  width: 188px;
  height: 88px;
  background-color: #292a2c;
  float: left;
  margin-right: 5px;
}
.text {
  float: left;
}
.btn {
  background-color: #292a2c;
  color: #ededed;
  margin-top: 33px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6 d-flex p-0">
  <div class="box">
    <div class="img"></div>
    <div class="text">
      <h6 class="m-auto">Text goes here</h6>
      <button class="btn rounded-0 btn-block">Button</button>
    </div>
  </div>
</div>

＆＃13;

Bootstrap 4：全宽内联按钮

6 个答案: