javascript - 如何在 Twitter Bootstrap 中围绕元素制作正方形?

标签 javascript twitter-bootstrap css twitter-bootstrap-3 ionic-framework

我正在尝试制作一些网页,如图所示。我几乎可以制作 90%。但我有一个问题

  • 如何制作如图所示的正方形(底部有三 Angular 形的正方形。我知道我们可以使用边框制作正方形。但是如何在底部三 Angular 形中制作三 Angular 形
  • 如何使 contend 可滚动意味着我 contend 它不滚动 我已经使用了 overflow:auto 和 scroll

)

.bg {
    background: #597A4D!important;
    width: 100%!important;
}
.nav_bar {
    background: #597A4D!important;
    border-style: none;
    height: 44px;
    border: 0px!important;
    border-radius: 0px!important;

}
.display_menu li a{
    font-size: 1.2em!important;
    color: #ffffff!important;
}

ul.display_menu li:last-child{
    background:#3C86D7;
}

.rowClass {
    display: block;
    margin-top: 3%;

}
.rowClass >div {
    padding: 3em;
    text-align: center;
}
.text_row div{
    display: block;
    border: 1px ;
    padding: auto;
    color: #ffffff;
    margin-top: 3%;

}

.rowClass span {
    display: block!important;
    color: #ffffff;
}
.logo_image{
  width: 60px;
    height: 60px;
}

.email_div label {
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}
.email_div{
    width: 50%;
    margin: auto;
}
.email_div  label {

}
.email_div input {
    background: transparent;
    border: 1px solid #3C86D7;
    display: inline;
    width: 50%;
}
.email_div button {
    display: inline;
}

.wrapper{
    overflow: auto!important;
    overflow: scroll!important;
}

这是我的 plunker:http://plnkr.co/edit/G8mp53rQlF562hEkgmgT?p=preview

enter image description here

最佳答案

就这样

.wrapper{
    overflow: auto!important;
    overflow: scroll!important
    height: 200px;
}

或期望的高度而不是

.wrapper{
    overflow: auto!important;
    overflow: scroll!important;
}

它将开始滚动,因为它只会在数据溢出时滚动

然后塑造这个article可能有帮助,但您不需要使用任何东西,只需使用 Bootstrap 工具提示

关于javascript - 如何在 Twitter Bootstrap 中围绕元素制作正方形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31487957/

相关文章:

javascript - 无法将 php 密码字段上传到 phpmyAdmin

html - 我需要修改表单上的字段显示吗?.. Ruby on Rails...RoR...

javascript - 在 NW.js 应用程序中设置 HTML5 文件 API 的配额

javascript - 在 Yii2 中更改复选框图标

javascript - 汉堡菜单不起作用

html - 使用 Bootstrap 3 编辑移动版 CSS

javascript - 如何在 Angular 中使用模态

javascript - 以编程方式更改 Bootstrap 弹出窗口颜色

css - 将 LI 动画化为 div

javascript - 制作一个 div 滚动以显示位于下方的主要内容