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

所以我需要帮助来创建与提供的图片完全相同但我想我正在混合引导类。我在开始时有一个col-md-8 col-mdoffset-1的原因是因为我有一个侧栏，我正在使用其他东西，所以需要在那里。我在这里添加了JS FIDDLE https://jsfiddle.net/fne081z3/

Answer 1

在 col-md-8 之前的通知框 div中添加一行<div class="row">。

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

使用bootstrap无法在正确的位置和内部div中获取字段

1 个答案: