Bootstrap全宽设计

时间：2016-06-27 10:33:21

标签： html css twitter-bootstrap twitter-bootstrap-3

我想像div那样设置样式，如下图所示。

enter image description here

我设计了一些但不完整的width，它还在移动视图中显示了侧滚动。

请告诉我如何完整width。

我的HTML代码

#news_and_cv {
  background: #e6e6e6;
}
#send_cv {
  background: #e6e6e6;
  padding: 25px 0px 20px 0px;
}
#news {
  background: #02bed4;
  padding: 25px 0px 20px 0px;
}
.submit {
  padding: 13px 20%;
  background: #02bed4;
  color: #fff;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 1.5px;
  border: 1px solid #fff;
  text-align: center;
  margin-top: 30px;
}
.submit:hover {
  background: #02bed4;
}
.form-style {
  display: block;
  width: 80%;
  height: 37px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  border: 1px solid #ccc;
}
.attach {
  margin-left: 10%;
  float: left;
}
#send_cv form,
input {
  margin: 0 auto;
}
.news_detail {
  padding: 0px 15px;
  color: #fff;
  margin-bottom: 13px;
  margin-top: 13px;
}
.news_detail p {
  text-align: justify;
  margin-bottom: 20px;
}
.news_detail a {
  color: #fff;
  text-decoration: underline;
}
.head_title_main {
  text-align: center;
  font-family: 'Marcellus';
  font-size: 35px;
  font-variant: small-caps;
  letter-spacing: 2px;
  color: #505050;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section id="news_and_cv">
  <div class="container">
    <div class="row">
      <div class="col-md-7" id="send_cv">
        <div class="row">
          <div class="col-md-12">
            <div class="head_title_main">Send Your CV</div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <form style="text-align:center;">
              <input class="form-style" type="text" placeholder="First Name" />
              <br/>
              <input class="form-style" type="text" placeholder="Last Name" />
              <br/>
              <input class="form-style" type="email" placeholder="Email" />
              <br/>
              <input class="form-style" type="tel" placeholder="Phone" />
              <br/>
              <input class="attach" type="file" /> <span>Attach CV (pdf, doc, docx)</span>
              <br/>
              <input type="submit" class="submit" value="Submit" />
            </form>
          </div>
        </div>
      </div>
      <!--end of col-md-7-->

      <div class="col-md-5" id="news">
        <div class="row">
          <div class="col-md-12">
            <div class="head_title_main">News</div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="news_detail">
              <h4>Urgent opening for Electrical Engineering</h4>
              <p>Lorem ipsum dolor amet, consectetur adipite scinelit vestibulum vel quam sitare amet odio ultricies dapbus acer vitae.</p>
              <span>06/06/2016</span>  <span class="pull-right"><a href="#">Read more</a></span>
              <hr>
            </div>

            <div class="news_detail">
              <h4>Urgent opening for Electrical Engineering</h4>
              <p>Lorem ipsum dolor amet, consectetur adipite scinelit vestibulum vel quam sitare amet odio ultricies dapbus acer vitae.</p>
              <span>06/06/2016</span>  <span class="pull-right"><a href="#">Read more</a></span>
            </div>
          </div>
        </div>
      </div>
      <!--End of col-md-5-->
    </div>
  </div>
</section>

2 个答案:

答案 0 :(得分：5)

根据bootstrap docs，对于全角度，您必须使用.container-fluid而不是.container，这会在桌面视图中限制为width:1170px。

并删除.rows内的嵌套.col-md-*，否则会导致h-scrollbar

要移除超小型设备中的h滚动条，您必须使用xs

来使用.col-xs-12类

＆＃13;
＆＃13; 
#news_and_cv {
  background: #e6e6e6;
}
#send_cv {
  background: #e6e6e6;
  padding: 25px 0px 20px 0px;
}
#news {
  background: #02bed4;
  padding: 25px 0px 20px 0px;
}
.submit {
  padding: 13px 20%;
  background: #02bed4;
  color: #fff;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 1.5px;
  border: 1px solid #fff;
  text-align: center;
  margin-top: 30px;
}
.submit:hover {
  background: #02bed4;
}
.form-style {
  display: block;
  width: 80%;
  height: 37px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  border: 1px solid #ccc;
}
.attach {
  margin-left: 10%;
  float: left;
}
#send_cv form,
input {
  margin: 0 auto;
}
.news_detail {
  padding: 0px 15px;
  color: #fff;
  margin-bottom: 13px;
  margin-top: 13px;
}
.news_detail p {
  text-align: justify;
  margin-bottom: 20px;
}
.news_detail a {
  color: #fff;
  text-decoration: underline;
}
.head_title_main {
  text-align: center;
  font-family: 'Marcellus';
  font-size: 35px;
  font-variant: small-caps;
  letter-spacing: 2px;
  color: #505050;
  font-weight: bold;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section id="news_and_cv">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-md-7" id="send_cv">

            <div class="head_title_main">Send Your CV</div>

            <form style="text-align:center;">
              <input class="form-style" type="text" placeholder="First Name" />
              <br/>
              <input class="form-style" type="text" placeholder="Last Name" />
              <br/>
              <input class="form-style" type="email" placeholder="Email" />
              <br/>
              <input class="form-style" type="tel" placeholder="Phone" />
              <br/>
              <input class="attach" type="file" /> <span>Attach CV (pdf, doc, docx)</span>
              <br/>
              <input type="submit" class="submit" value="Submit" />
            </form>
          </div>
      <!--end of col-md-7-->

      <div class="col-xs-12 col-md-5" id="news">

        <div class="head_title_main">News</div>
        <div class="news_detail">
          <h4>Urgent opening for Electrical Engineering</h4>
          <p>Lorem ipsum dolor amet, consectetur adipite scinelit vestibulum vel quam sitare amet odio ultricies dapbus acer vitae.</p>
          <span>06/06/2016</span>  <span class="pull-right"><a href="#">Read more</a></span>
          <hr />
        </div>

        <div class="news_detail">
          <h4>Urgent opening for Electrical Engineering</h4>
          <p>Lorem ipsum dolor amet, consectetur adipite scinelit vestibulum vel quam sitare amet odio ultricies dapbus acer vitae.</p>
          <span>06/06/2016</span>  <span class="pull-right"><a href="#">Read more</a></span>
        </div>
      </div>
    </div>
  </div>
  <!--End of col-md-5-->
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

这是你最初问题的一个小问题：https://jsfiddle.net/DTcHh/表示参考...

使用.container-fluid关闭.container上的最大宽度，并使用显示表显示，您可以实现全宽，全高列。

我还使用@media查询为移动设备上的设备打开这些设备，而不会干扰堆叠布局。

https://jsfiddle.net/DTcHh/22102/ 

 <section id="news_and_cv">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-7 " id="send_cv">
        <h2>Send Your CV</h2>
        <form class="form-group">
          <input class="form-control" placeholder="First Name" type="text">
          <br>
          <input class="form-control" placeholder="Last Name" type="text">
          <br>
          <input class="form-control" placeholder="Email" type="email">
          <br>
          <input class="form-control" placeholder="Phone" type="tel">
          <br>
          <input class="attach" type="file"> <span>Attach CV
                        (pdf, doc, docx)</span>
          <br>
          <input class="btn btn-default" type="submit" value="Submit">
        </form>
      </div>
      <!--end of col-md-7-->
      <div class="col-md-5 " id="news">
        <h2>News</h2>
        <div class="news_detail">
          <h4>Urgent opening for Electrical Engineering</h4>
          <p>Lorem ipsum dolor amet, consectetur adipite scinelit vestibulum vel quam sitare amet odio ultricies dapbus acer vitae.</p><span>06/06/2016</span> <span class="pull-right"><a href="#">Read more</a></span>
          <hr>
        </div>
        <div class="news_detail">
          <h4>Urgent opening for Electrical Engineering</h4>
          <p>Lorem ipsum dolor amet, consectetur adipite scinelit vestibulum vel quam sitare amet odio ultricies dapbus acer vitae.</p><span>06/06/2016</span> <span class="pull-right"><a href="#">Read more</a></span>
        </div>
      </div>
      <!--End of col-md-5-->
    </div>
  </div>
</section>



.row {
  display: table;
}

@media (min-width: 768px) {
  #news,
  #send_cv {
    display: table-cell;
    float: none;
        width: 50%;
  }
}

#news_and_cv {
  background: #e6e6e6;
}

#news_and_cv .container-fluid{
  padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

#news_and_cv h2 {
  text-align: center;
  display: block;
  h2text-align: center;
  font-family: 'Marcellus';
  font-size: 35px;
  font-variant: small-caps;
  letter-spacing: 2px;
  color: #505050;
  font-weight: 700;
}

#send_cv {
  background: #e6e6e6;
}

#news {
  background: #02bed4;
}

.btn.btn-default {
  padding: 13px 20%;
  margin-bottom: 20px;
  background: #02bed4;
  color: #fff;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 1.5px;
  border: 1px solid #fff;
  text-align: center;
  margin: 20px auto;
  display: block;
}

.news_detail {
  padding: 0 15px;
  color: #fff;
  margin-bottom: 13px;
  margin-top: 13px;
}

.news_detail p {
  text-align: justify;
  margin-bottom: 20px;
}

.news_detail a {
  color: #fff;
  text-decoration: underline;
}
相关问题
最新问题