Question

这是我在这里发表的第一篇文章，但我觉得有必要提出这个问题，因为我一直试图找出合适的解决办法，但没有取得任何成功。

我花了更多的时间然后我想承认试图找出行和列的位置以及如何操作它们内部的元素但我很难完成布局。我想将我的按钮放在它们现在的位置，但是当报价框填满文本时，它们不会向下移动。

我知道发生了什么，但我无法弄清楚如何正确修复它。我相信当文本溢出到按钮div时，引用文本的边缘向下推按钮行。如何使按钮div / row忽略任何文本并保留在原位，以防有特别长的引用。我显然会最终修改引号的长度但是现在我想知道如何使我的按钮保持原位以及如何正确地向左或向右移动它们而不必依赖文本 - “（左/右/中心） ”。必须有一种方法可以更准确地控制行内元素的位置不存在吗？

这是我的codepen和代码：http://codepen.io/countercoded/pen/Mpjdww

<div class="container">

  <div class="row justify-content-center">
    <div class="col-xs-12 text-center" id="title"><span class="title-text">Random Quote Machine</span></div>
  </div>

  <div class="row">

    <div class="col-sm-12 text-center" id="quote-box">

      <div id="new-quote">Quote goes here.</div>

      <div class="row" id="button-rows">
        <div class="col-6 text-left">      
          <i class="fa fa-twitter fa-3x" aria-hidden="true"></i>
        </div>
        <div class="col-6 text-right">
          <i class="fa fa-comment fa-3x" aria-hidden="true"></i>
        </div>         
      </div>

    </div>

  </div>

</div>




@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);

body{
  background-color: #9e0e0e;
  font-family: raleway;
  font-weight: 400;
}

.container{
  width: 600px !important;
  margin-top:200px;
}



#title{
color: #fff;

.title-text{
  font-size: 40px;
  text-align: center;
  }
}

#quote-box{
  height: 300px;
  background-color: #ffffff;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 3px;
} 
#button-rows{
  padding-top:220px;

}
.fa-comment{
  color: #ba0e0e;
  text-shadow: 2px 2px 1px #ccc;
}.fa-comment:hover{
  color: #910a0a;
}   

.fa-twitter{
  color: #ba0e0e;
  text-shadow: 2px 2px 1px #ccc;
} .fa-twitter:hover{
  color: #910a0a;
}

感谢您的帮助！

Answer 1

我绝对会将这些图标放在底部。您可以通过定位行并使图标保持原样来实现。然后，您可以向completion: () -> ()添加一些填充，以便引号框的内容不会与这些图标重叠，具体取决于您希望引号的显示方式，引号的长度等。

将CSS包含在HTML中，以便在引导后加载。这是一个更新的代码集http://codepen.io/mcoker/pen/zZZZwM

#new-quote

Answer 2

您必须使用“位置”属性将它们固定到框的底部。

我在这里使用position:absolute属性。有关位置的更多信息，请访问：https://developer.mozilla.org/en/docs/Web/CSS/position

检查下面的小提琴：

http://codepen.io/hunzaboy/pen/yMMMMv

我添加了以下代码。

#quote-box{
  padding-bottom: 60px; /* so that the icons dont overlapp the text*/
}

#button-rows{
  position: absolute;
  bottom: 10px;
  width: 100%;
}

为什么我的文本溢出到我的引导行并将其推下？

2 个答案: