Question

在我的HTML中，我使用divine到2 col-md-6，在左侧我有一张图片，右边我有一个文字，不确定我是否应该使用jQuery .height()？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="margin-bottom: 50px">
  <div class="col-md-6 col-xs-6" style="float: right" style=""> 
    <div style="background-color:red;height:456px;width:100%;"></div>
  </div>
  <div class="col-md-6 col-xs-6" style="text-align: right;"> 					 
    <h1 id="head-font" style="font-weight: bolder; margin: 0;">TITLE</h1> 
    <label id="p-font" class="text-font">INFO</label>
    <p class="title text-font" id="p-font" >promotion description</p>
      
    // this buttuon I want it to display at bottom of div image
    <div class="col-sm-12 col-lg-12 col-md-12">
      <button type="submit" id="but">
        Information
      </button>
    </div>
  </div>
</div>

Answer 1

您可以使用解决方案https://jsfiddle.net/hhhy8uhv/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row" style="margin-bottom: 50px">
    <div class="col-md-6 col-xs-6"> 					 
      <h1 id="head-font" style="font-weight: bolder; margin: 0;">TITLE</h1> 
      <label id="p-font" class="text-font">INFO</label>
      <p class="title text-font" id="p-font" >promotion description</p>
    </div>
     <div class="col-md-6 col-xs-6"> 
      <div style="background-color:red;height:456px;width:100%;"></div>
    </div>
    <div class="col-sm-12 col-lg-12 col-md-12 text-center">
      <button type="submit" id="but">
        Information
      </button>
    </div>
  </div>
</div>

解决方案没有jQuery，只需放置容器即可。

另一个解决方案 https://jsfiddle.net/hhhy8uhv/1/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xs-6"> 					 
      <h1 id="head-font" style="font-weight: bolder; margin: 0;">TITLE</h1> 
      <label id="p-font" class="text-font">INFO</label>
      <p class="title text-font" id="p-font" >promotion description</p>
    </div>
     <div class="col-md-6 col-xs-6"> 
      <div style="background-color:red;height:456px;width:100%;"></div>
    </div>
  </div>
  <div class="row" style="margin-top: 10px;">
    <div class="col-sm-12 col-lg-12 col-md-12 text-center">
      <button type="submit" id="but">
        Information
      </button>
    </div>
  </div>
</div>

再加上一个row，您可以按住按钮。

希望这会对你有所帮助。

Answer 2

<div class="row" style="margin-bottom: 50px">
   <div class="col-md-6 col-xs-6">
      <div style="background-color:red;height:456px;"></div>
   </div>
   <div class="col-md-6 col-xs-6" style="text-align: right;">
      <h1 id="head-font" style="font-weight: bolder; margin: 0;">TITLE</h1>
      <label id="p-font" class="text-font">INFO</label>
      <p class="title text-font" id="p-font" >promotion description</p>
      // this buttuon I want it to display at bottom of div image
   </div>
   <button type="submit" id="but">
   Information
   </button>
</div>


//CSS Code


.row{
  position: relative;
}
#but{
  position: absolute;
  bottom:0;
  right: 3%;
}

更新了小提琴链接https://jsfiddle.net/DTcHh/38362/ 略微改变了HTML的结构。

您可以将红色背景更改为右，然后将CSS更改为以下

#but {
    position: absolute;
    bottom: 0;
    left: 37%;
}

如何使用jQuery在底部div设置Button

2 个答案: