搜索
搜索

Bootstrap全宽设计

Jeseem Shajahan 发表于 Dev
32
杰西姆·沙贾汉（Jesemm Shajahan）

我想像div下面的图像一样样式。

在此处输入图片说明

我已经设计了一些功能，但它并不完整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>

迪帕斯

根据bootstrap docs的说明，对于全角，您必须使用.container-fluid而不是在桌面视图中.container限制width:1170px显示。

并清除.rows内部的嵌套，.col-md-*否则会导致H-scrollbar

通过使用以下命令删除必须使用xs类的超小型设备中的h滚动条.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-->

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使Bootstrap输入组全宽

全宽Bootstrap下拉导航

Bootstrap轮播全宽问题

如何使Bootstrap按钮全宽？

Bootstrap 单个全宽列

具有全宽功能的Twitter Bootstrap

Bootstrap 4拆分按钮全宽

Bootstrap 4内联表单全宽

Bootstrap 3：导航栏未全宽

Bootstrap 3全宽div在容器中

Bootstrap Jumbotron不会变成机身的全宽

Bootstrap导航选项卡全宽

全宽下拉子导航Bootstrap 3

bootstrap 4 全宽下拉菜单

Bootstrap 全宽下拉菜单

使用yamm.css的Bootstrap全宽子菜单

bootstrap 3全宽图像和容器中的div

Bootstrap v3，全宽列的反向堆积顺序

Bootstrap按钮全宽，用于较小的屏幕尺寸

在 Bootstrap 中获取响应式全宽图像

在<header>之后在容器外部进行Bootstrap 3全宽巨无霸

Bootstrap 5 Card Header 未填充全宽

如何使我的Bootstrap Carousel整个页面全宽？

如何使用Bootstrap 3使我的图像全宽

col-8 bootstrap 中的行背景全宽

Wordpress：全宽不是全宽

全宽li元素

Flexbox不是全宽

自举-全宽布局

TOP 榜单

  1. 1

    蓝屏死机没有修复解决方案

  2. 2

    计算数据帧中每行的NA

  3. 3

    UITableView的项目向下滚动后更改颜色，然后快速备份

  4. 4

    Node.js中未捕获的异常错误，发生调用

  5. 5

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  6. 6

    Linux的官方Adobe Flash存储库是否已过时？

  7. 7

    验证REST API参数

  8. 8

    ggplot：对齐多个分面图-所有大小不同的分面

  9. 9

    Mac OS X更新后的GRUB 2问题

  10. 10

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  11. 11

    带有错误“ where”条件的查询如何返回结果？

  12. 12

    用日期数据透视表和日期顺序查询

  13. 13

    VB.net将2条特定行导出到DataGridView

  14. 14

    如何从视图一次更新多行（ASP.NET - Core）

  15. 15

    Java Eclipse中的错误13，如何解决？

  16. 16

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  17. 17

    离子动态工具栏背景色

  18. 18

    应用发明者仅从列表中选择一个随机项一次

  19. 19

    当我尝试下载 StanfordNLP en 模型时，出现错误

  20. 20

    python中的boto3文件上传

  21. 21

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

热门标签

归档