Question

我最初在xhtml和css中创建了没有Bootstrap的简历。现在我想要引入Bootstrap以了解更多信息。但是，一旦我添加了Bootstrap，我就遇到了在一个位置对齐文本的问题。我附上了一张显示问题的图片。

正如您所看到的，我有一个容器，其中有一行和一些关于行中元素大小的规定。我的号码，github和电子邮件在左边，我的地址在右边。右边的地址应该遵循联系权限类，其中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
}
}

Answer 1

由于margin-left和margin-right被分配到<body>

，您遇到了问题

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

将pull-right课程分配到contact-right，而不是使用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>

为什么bootstrap切断了我的一些文字？

1 个答案: