html - 为什么 bootstrap 会截断我的一些文本？

我最初是在没有使用 xhtml 和 css 的 Bootstrap 的情况下创建我的简历的。现在我想合并 Bootstrap 以了解更多信息。但是，一旦我添加了 Bootstrap，我就遇到了在一个地方对齐文本的问题。我附上了一张显示问题的图片。

如您所见，我有一个包含一行的容器以及一些关于行中元素大小的规定。我的号码、github 和电子邮件在左边，我的地址在右边。右边的地址应该继承contact-right类，它有float: right; text-align: right; 设置，但它不是，它有一个左对齐。这是相关的 CSS:

@media (min-width: 1000px) {
body {
    margin-left: 25%;
    margin-right: 30%;
    margin-top: 10px;
    margin-bottom: 10px;
    min-width: 400px;
    line-height: 1.2em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
}
.education-right {
    float: right;
    line-height: 0.8em;
    text-align: right;
}
}

@media (max-width: 1000px) and (min-width: 768px) {
body {
    margin-left: 20%;
    margin-right: 25%;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.0em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
}

.education-right {
    float: right;
    line-height: 0.8em;
    text-align: right;
}

.contact-right {
    float: right;
    line-height: 0.8em;
    text-align: right;
}
}

@media (max-width: 767px) {
body {
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 10px;
    margin-bottom: 10px;
    min-width: 300px;
    line-height: 1.0em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 4px;
}

.education-right, .contact-right {
    margin-left: 29px
}
}

最佳答案

由于 margin-left 和分配给您的 margin-right 的 <body>，您遇到了问题

删除这些属性，它将正常工作。

Assign pull-right class to contact-right instead of using float:right

@media (min-width: 1000px) {
  body {
    margin-top: 10px;
    margin-bottom: 10px;
    min-width: 400px;
    line-height: 1.2em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
  }
  .contact-right {
    line-height: 0.8em;
    text-align: right;
  }
}

@media (max-width: 1000px) and (min-width: 768px) {
  body {
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.0em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
  }
  .education-right {
    line-height: 0.8em;
    text-align: right;
  }
  .contact-right {
    line-height: 0.8em;
    text-align: right;
  }
}

@media (max-width: 767px) {
  body {
    margin-top: 10px;
    margin-bottom: 10px;
    min-width: 300px;
    line-height: 1.0em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 4px;
  }
  .education-right,
  .contact-right {
    margin-left: 29px
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="contact-left col-sm-6 col-xs-12">
      <p>123456789</p>
      <p><a>github@github.com</a></p>
    </div>
    <div class="contact-right col-sm-6 col-xs-12">
      <p style="color:red; font-weight:900;">Problem Element Below</p>
      <a>Address won't cut this time, 12345 </a>
    </div>
  </div>
</div>

关于html - 为什么 bootstrap 会截断我的一些文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49972427/

html - 为什么 bootstrap 会截断我的一些文本？

上一篇：javascript - 单击按钮而不刷新整个页面

下一篇：html - 根据浏览器高度调整填充值