html - 为什么我的文本溢出到我的 Bootstrap 行并将其向下推？

Question

这是我在这里的第一篇文章，但我觉得有必要问这个问题，因为我一直在努力找出合适的解决方案，但没有取得任何成功..

我花了更多的时间来尝试找出行和列的位置以及如何操作其中的元素，但我很难完成我的布局。我想将我的两个按钮放在它们现在所在的位置，但当引号框填满文本时不让它们向下移动。

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

这是我的代码笔和代码: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

我绝对会将这些图标放在底部。您可以通过定位该行并保持图标对齐不变来做到这一点。然后，您可以向 #new-quote 添加一些填充，以便引号框的内容不会与这些图标重叠，具体取决于您希望引号的外观、引号的长度等.

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
@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 {
  position: absolute;
  bottom: 0.5em;
  left: 1em; right: 1em;
}

#new-quote {
  padding: 1em;
}

.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;
}
</style>
<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">asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf</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>