Question

你能帮帮我吗？我有一个模型，我想转换为Bootstrap，但我的容器元素有问题，如果在媒体上查询1024px，那么外部div上有一个元素。

这是我的代码

<div class="footer">
  <div class="footer-up">
    <div class="container">
      Objectively pursue extensible web services whereas cooperative deliverables. Phosfluorescently mesh optimal alignments and interoperable niche markets. Credibly whiteboard premium technology and orthogonal customer service. Energistically.
    </div>
  </div>
</div>

my-code

那么如何修复呢？提前致谢

Answer 1

添加css部分

.container {
  margin:20px;
}

工作小提琴

<强> fiddle

.container {
  margin:20px;
}
.homepage {
  margin: 50px 0;
  padding: 0 5%;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
.page-content {
  padding: 3% 0;
  background: #fcfef3;
  border-radius: 50px;
  box-shadow: 0 8px 16px -2px #929497;
}
.footer {
  display: inline-block;
  padding: 0 8%;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #ffffff;
}
.footer-up {
  background: #e62731;
  padding: 50px 0;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}

<div class="homepage">
  <div class="page-content">
    <div class="container">
      Energistically cultivate multidisciplinary portals rather than covalent products. Dynamically maintain functionalized technologies with fully tested solutions. Objectively target low-risk high-yield benefits for end-to-end infomediaries. Proactively coordinate visionary initiatives without team driven convergence. Holisticly transform mission-critical resources whereas low-risk high-yield meta-services.

Seamlessly repurpose enabled technology after reliable technologies. Conveniently reinvent 2.0 results vis-a-vis reliable meta-services. Energistically matrix bricks-and-clicks e-tailers after installed base content. Completely reinvent extensive results whereas synergistic relationships. Holisticly aggregate business supply chains rather than frictionless ideas.

Synergistically.
    </div>
  </div>
</div>

<div class="footer">
  <div class="footer-up">
    <div class="container">
      Objectively pursue extensible web services whereas cooperative deliverables. Phosfluorescently mesh optimal alignments and interoperable niche markets. Credibly whiteboard premium technology and orthogonal customer service. Energistically.
    </div>
  </div>
</div>

Answer 2

您需要在margin

上设置container

＆＃13;

.homepage {
  margin: 50px 0;
  padding: 0 5%;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
.page-content {
  padding: 3% 0;
  background: #fcfef3;
  border-radius: 50px;
  box-shadow: 0 8px 16px -2px #929497;
}
.footer {
  display: inline-block;
  padding: 0 8%;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #ffffff;
}
.footer-up {
  background: #e62731;
  padding: 50px 0;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}
.container{
  margin: 15px; 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="homepage">
  <div class="page-content">
    <div class="container">
      Energistically cultivate multidisciplinary portals rather than covalent products. Dynamically maintain functionalized technologies with fully tested solutions. Objectively target low-risk high-yield benefits for end-to-end infomediaries. Proactively coordinate visionary initiatives without team driven convergence. Holisticly transform mission-critical resources whereas low-risk high-yield meta-services.

Seamlessly repurpose enabled technology after reliable technologies. Conveniently reinvent 2.0 results vis-a-vis reliable meta-services. Energistically matrix bricks-and-clicks e-tailers after installed base content. Completely reinvent extensive results whereas synergistic relationships. Holisticly aggregate business supply chains rather than frictionless ideas.

Synergistically.
    </div>
  </div>
</div>

<div class="footer">
  <div class="footer-up">
    <div class="container">
      Objectively pursue extensible web services whereas cooperative deliverables. Phosfluorescently mesh optimal alignments and interoperable niche markets. Credibly whiteboard premium technology and orthogonal customer service. Energistically.
    </div>
  </div>
</div>

＆＃13;

div外的div容器

2 个答案: