부트 스트랩 전폭 디자인

Question

아래 이미지와 같이 div 스타일을 지정하고 싶습니다.

좀 있지만 완전하지 width을 설계하고 그것은 또한 모바일보기에서 사이드 스크롤을 보여줍니다.

전체 수행 방법을 알려주세요. width.

내 HTML 코드 bootstrap docs에 따르면

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

Answer 1

전체 폭, 대신 바탕 화면보기에 width:1170px에 억제입니다 .container의 .container-fluid을 사용해야합니다.

및 중첩 .rows.col-md-* 내부를 제거, 그렇지 않으면 그것은 시간 - 스크롤의 원인이됩니다

.col-xs-12

#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; 
 
}

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

를 사용하여 당신이 xs 클래스를 사용할 필요가 초소형 장치의 H-스크롤 막대를 제거하는

Answer 2

초기 문제는 다음과 같습니다. 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; 
}