html - 无法使用 Bootstrap 在正确的位置和边界 div 内获取字段

Question

我有一个盒子，里面有一些设置信息，我正在使用 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/

Answer 1

添加一行<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>