我有一个盒子,里面有一些设置信息,我正在使用 Bootstrap ,但我不确定为什么我把它搞砸了。 我想创建与此类似的东西。
所以我这样写代码
<!-- Settings -->
<div class="col-md-8 col-md-offset-1">
<div class="bSettings">
<h2>Settings</h2>
<div class="col-md-12">
<div class="noticebox">
<h3>HELLO WORLD HELLO WORLD</h3>
<p>lorem ipsum alit berket usum and amazing</p>
<button type="button" class="btn btn-primary active">On</button>
<button type="button" class="btn btn-primary ">Off</button>
</div>
</div>
</div><!-- /.borrow-settings -->
所以 bsettings 是外部框,而 noticebox 是椭圆形的框,所有内容都在其中,我无法将按钮推到右侧,将文本推到左侧。我尝试使用像 pull-right 这样的 bootstrap 类,甚至像这样将所有这些类划分为 col-md-8 和 col-md-4 这样的类
<div class="col-md-8 col-md-offset-1">
<div class="bSettings">
<h2>Settings</h2>
<div class="noticebox">
<div class="col-md-8">
<h3>HELLO WORLD HELLO WORLD</h3>
<p>lorem ipsum alit berket usum and amazing</p>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-primary active">On</button>
<button type="button" class="btn btn-primary ">Off</button>
</div>
</div>
</div>
.bSettings{
border : 1px solid #eeeeee;
}
.bSettings h2{
color: #666;
font-size:20px;
padding: 10px 10px 10px 40px;
}
.bSettings .noticebox{
border: 1px solid #eeeeee;
border-radius : 20px;
padding: 20px;
}
所以我需要帮助来创建与提供的图片完全一样的内容,但我想我混淆了 Bootstrap 类。我在开始时有一个 col-md-8 col-mdoffset-1 的原因是因为我也有一个侧边栏,我正在使用它来做其他事情,所以它需要在那里。我在这里添加了 JS FIDDLE https://jsfiddle.net/fne081z3/
最佳答案
添加一行<div class="row">
在 noticebox div 内的 col-md-8 之前。
CSS
.noticebox{
border: 1px solid #EAEAEA;
border-radius: 10px;
padding: 0 15px;
}
.notice-btns{
border-radius: 0;
// set min-height equaling the height of noticebox
}
.notice-btns:last-child{
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
HTML
<div class="row">
<div class="col-md-8 col-md-offset-1">
<div class="bSettings">
<h2>Settings</h2>
<div class="noticebox">
<div class="row">
<div class="col-md-8">
<h3>HELLO WORLD HELLO WORLD</h3>
<p>lorem ipsum alit berket usum and amazing</p>
</div>
<button type="button" class="col-md-2 notice-btns btn btn-primary active">On</button>
<button type="button" class="col-md-2 notice-btns btn btn-primary ">Off</button>
</div>
</div>
</div>
</div>
</div>
关于html - 无法使用 Bootstrap 在正确的位置和边界 div 内获取字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35033719/