如何更改<hr />大小并以div为中心？

Question

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我想让这个网页更清晰，并希望更改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>

Answer 2

＆＃13;

＆＃13;

hr {
 margin-left: 8.3%; 
margin-right: 8.3%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

删除class =＆＃34; row＆＃34;部分并给出你想要的宽度50％，70％等。