html - 如何更改 大小并将其居中放置在 div 中？

Question

hr {
  width:100%;
  height:2px;
  background-color:#888;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="content">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <div class="row">
            <div class="col-sm-6 col-sm-offset-1">
              <h3> News</h3>
              <h4>The New Concept</h4>
              <p>While files form the internet can be useful , this file type can prote....</p>
              <div class="read-more">
                <a href="#">Read more news</a>
              </div>
            </div>
            <div class="col-sm-4 news">
              <h3> News</h3>
              <h4>The New Concept</h4>
              <p>While files form the internet can be useful , this file type can prote....</p>
              <div class="read-more">
                <a href="#">Read more news</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <hr>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h3 id="ebook">Hot e-Book</h3>
      </div>
    </div>
  </div>

我想让这个网页更清晰，并想更改 hr 线宽大小，使其看起来与上面的 div 区域宽度相同。

但是我试了几次都不行，所以我来这里看看有没有人可以帮助我？

请查看整页内容，因为它是响应式设计。如何改变hr的线宽，使其宽度为col-sm-6 + col-sm-4？

Answer 1

用 div 包裹 hr 并将其居中。

hr {
  width:100%;
  height:2px;
  background-color:#888;
}
#div-center{
  float: none;
  margin: 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="content">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <div class="row">
            <div class="col-sm-6 col-sm-offset-1">
              <h3> News</h3>
              <h4>The New Concept</h4>
              <p>While files form the internet can be useful , this file type can prote....</p>
              <div class="read-more">
                <a href="#">Read more news</a>
              </div>
            </div>
            <div class="col-sm-4 news">
              <h3> News</h3>
              <h4>The New Concept</h4>
              <p>While files form the internet can be useful , this file type can prote....</p>
              <div class="read-more">
                <a href="#">Read more news</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-xs-10" id="div-center">
      <hr>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h3 id="ebook">Hot e-Book</h3>
      </div>
    </div>
  </div>