Twitter引导列布局问题

Question

我在下面的代码中有以下代码，我遇到的问题是我注意到无论我做什么，我似乎无法将额外的实际状态的右侧减少，因为右侧似乎在step1和step2中有很多额外的空格。

我试图让它在台式机，平板电脑和移动设备上保持平衡。

有人可以告诉我如何解决这个问题。

这是我的FIDDLE

我的代码

HTML

<div class="container claim-c">

  <div class="row claimBordercolor">


    <div class="col-xs-4 col-sm-2 col-md-3 claim-divider">

      <h2 class="steps "> <span class="steppos">STEP</span> <span class='circle pull-right'>1</span></h2>

    </div>

    <div class="col-xs-8 col-sm10 col-md-9">
      <h4 class="claim-hdr" style="color:#fff">CURRENT </h4>
      <div class="row">
        <div class="col-xs-9 col-sm-4 col-md-4 ">

          <label class="control-label required" for="name">SOME SOME Number <i class="fa fa-asterisk" aria-hidden="true"></i></label>
          <input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
        </div>

        <div class="col-xs-9 col-sm-2 col-md-2">
          <h2><span class="label label-warning orPos">OR</span></h2>
        </div>

        <div class="col-xs-9 col-sm-4  col-md-4">

          <label class="control-label " for="name"> Some/test s&nbsp;Lotus &nbsp;Number</label>
          <input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
        </div>
      </div>
    </div>



  </div>
  <!-- end of row -->


  <div class="row claimBordercolor">

    <div class="col-xs-4 col-sm-2 col-md-3 claim-divider2">
      <h2 class="steps "> <span class="steppos">STEP</span>  <span class='circle pull-right'>2</span></h2>
    </div>

    <div class="col-xs-8 col-sm-10 col-md-9">
      <h4 class="claim-hdr" style="color:#fff"> LoremIpsumorem Ipsum Lorem ipsum lorem ipsum Lorem ipsumLoremipsum lorem ipsum.</h4>
      <div class="row">
        <div class="col-xs-8 col-sm-4 col-md-4">
          <label class="control-label " for="name">Date of Birth(MM/DD/YYYY)</label>
          <input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
          <label class="control-label " for="name"> Type</label>
          <input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
        </div>

        <div class="col-xs-8  col-sm-2 col-md-1">
          <h2><span class="label label-warning orPos">OR</span></h2>
        </div>

        <div class="col-xs-8 col-sm-4  col-md-4">
          <label class="control-label " for="name"> Name</label>
          <input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />

          <label class="control-label " for="name">ZIP </label>
          <input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
        </div>
      </div>
    </div>
  </div>
  <!-- end of row -->





</div>

CSS

       .circle {
     position: relative;
     height: 50px;
     width: 50px;
     text-align: center;
     line-height: 47px;
     color: #000;
     border-radius: 50%;
     border: 2px solid #fff;
     z-index: 999999;
   }

   .circle:after {
     position: absolute;
     content: '';
     top: 4px;
     left: 4px;
     height: calc(100% - 8px);
     width: calc(100% - 8px);
     border-radius: inherit;
     background: #fff;
     z-index: -1;
   }

   .circle.white:after {
     top: 0px;
     left: 0px;
     border: 4px solid #000
   }

   .circle.image:after {
     background: url(http://lorempixel.com/200/200/abstract/4);
   }

   .claim-c {
     border: 2px solid #ccc;
     background-color: #30A759;
     margin-top: 20px;
     font-family: Arial, Helvetica, sans-serif;
   }

   .claim-c label {
     color: #fff !important;
     text-transform: uppercase;
     padding-top: 15px;
   }

   .claim-divider {
     border-right: 14px solid #fff;
     height: 190px;
     margin-top: 9px;
     margin-bottom: 9px;
   }

   .claim-divider2 {
     border-right: 14px solid #fff;
     height: 232px;
     margin-top: 9px;
     margin-bottom: 9px;
   }

   .claimBordercolor {
     /*  border:10px solid #FFCB00; */
     border: 10px solid rgba(12, 64, 28, 0.91);
   }

   .claim-hdr {
     width: 81%;
     color: #fff;
     text-transform: uppercase;
   }

   .margin-right20 {
     margin-right: 20px;
   }

   .steppos {
     color: #fff;
     position: relative;
     top: 7px;
     font-weight: bold;
   }

   .orPos {
     padding-right: 10px;
   }

   @media only screen and (max-width: 490px) {
     body {
       background-color: red;
     }
     .claim-divider {
       border-right: 14px solid #fff;
       height: 330px;
       margin-top: 9px;
       margin-bottom: 9px;
     }
     .claim-divider2 {
       border-right: 14px solid #fff;
       height: 582px;
       margin-top: 9px;
       margin-bottom: 9px;
     }
     .steppos {
       color: #fff;
       position: relative;
       top: -8px;
       font-weight: bold;
     }
     @media only screen and ( min-width:750px) {
       body {
         background-color: blue;
       }
       .claim-divider {
         border-right: 14px solid #fff;
         height: 330px;
         margin-top: 9px;
         margin-bottom: 9px;
       }
       .claim-divider2 {
         border-right: 14px solid #fff;
         height: 582px;
         margin-top: 9px;
         margin-bottom: 9px;
       }
       .steppos {
         color: #fff;
         position: relative;
         top: -8px;
         font-weight: bold;
       }

Answer 1

将col-md-4更改为col-md-6。

<div class="col-xs-9 col-sm-4 col-md-6 ">

此外，您还有一些colsm没有连字符的实例。

http://codepen.io/ruchiccio/pen/KzbBvB

Answer 2

一些事情：

• 您有错误.col-sm10，应该是.col-sm-10
• 在你的一行中你总共有10个cols。当bootstrap中的最大值为12时，而不是

.col-sm-4 + .col-sm-2 + .col-sm-4（总计= 10）

你可以：

.col-sm-5 + .col-sm-2 + .col-sm-5（总计= 12）

同样的事情适用于md类

• 当您xs .col-xs-9时，您需要.col-xs-12

段

＆＃13;

＆＃13;

.circle {
  position: relative;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 47px;
  color: #000;
  border-radius: 50%;
  border: 2px solid #fff;
  z-index: 999999;
}
.circle:after {
  position: absolute;
  content: '';
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  width: calc(100% - 8px);
  border-radius: inherit;
  background: #fff;
  z-index: -1;
}
.circle.white:after {
  top: 0px;
  left: 0px;
  border: 4px solid #000
}
.circle.image:after {
  background: url(http://lorempixel.com/200/200/abstract/4);
}
.claim-c {
  border: 2px solid #ccc;
  background-color: #30A759;
  margin-top: 20px;
  font-family: Arial, Helvetica, sans-serif;
}
.claim-c label {
  color: #fff !important;
  text-transform: uppercase;
  padding-top: 15px;
}
.claim-divider {
  border-right: 14px solid #fff;
  height: 190px;
  margin-top: 9px;
  margin-bottom: 9px;
}
.claim-divider2 {
  border-right: 14px solid #fff;
  height: 232px;
  margin-top: 9px;
  margin-bottom: 9px;
}
.claimBordercolor {
  /*  border:10px solid #FFCB00; */
  border: 10px solid rgba(12, 64, 28, 0.91);
}
.claim-hdr {
  width: 81%;
  color: #fff;
  text-transform: uppercase;
}
.margin-right20 {
  margin-right: 20px;
}
.steppos {
  color: #fff;
  position: relative;
  top: 7px;
  font-weight: bold;
}
.orPos {
  padding-right: 10px;
}
@media only screen and (max-width: 490px) {
  body {
    background-color: red;
  }
  .claim-divider {
    border-right: 14px solid #fff;
    height: 330px;
    margin-top: 9px;
    margin-bottom: 9px;
  }
  .claim-divider2 {
    border-right: 14px solid #fff;
    height: 582px;
    margin-top: 9px;
    margin-bottom: 9px;
  }
  .steppos {
    color: #fff;
    position: relative;
    top: -8px;
    font-weight: bold;
  }
  @media only screen and (min-width: 750px) {
    body {
      background-color: blue;
    }
    .claim-divider {
      border-right: 14px solid #fff;
      height: 330px;
      margin-top: 9px;
      margin-bottom: 9px;
    }
    .claim-divider2 {
      border-right: 14px solid #fff;
      height: 582px;
      margin-top: 9px;
      margin-bottom: 9px;
    }
    .steppos {
      color: #fff;
      position: relative;
      top: -8px;
      font-weight: bold;
    }

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container claim-c">
  <div class="row claimBordercolor">
    <div class="col-xs-4 col-sm-2 col-md-3 claim-divider">
      <h2 class="steps"> <span class="steppos">STEP</span> <span class="circle pull-right">1</span></h2>
    </div>
    <div class="col-xs-8 col-sm-10 col-md-9">
      <h4 style="color:#fff" class="claim-hdr">CURRENT </h4>
      <div class="row">
        <div class="col-xs-12 col-sm-5 col-md-5">
          <label for="name" class="control-label required">SOME SOME Number <i aria-hidden="true" class="fa fa-asterisk"></i>
          </label>
          <input type="text" placeholder="Enter name" name="name" id="name" class="form-control" vk_1d97d="subscribed">
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <h2><span class="label label-warning orPos">OR</span></h2>
        </div>
        <div class="col-xs-12 col-sm-5  col-md-5">
          <label for="name" class="control-label ">Some/test s&nbsp;Lotus &nbsp;Number</label>
          <input type="text" placeholder="Enter name" name="name" id="name" class="form-control" vk_1d97d="subscribed">
        </div>
      </div>
    </div>
  </div>
<div class="row claimBordercolor">
      <div class="col-xs-4 col-sm-2 col-md-3 claim-divider2">
        <h2 class="steps "> <span class="steppos">STEP</span>  <span class='circle pull-right'>2</span></h2>
      </div>
      <div class="col-xs-8 col-sm-10 col-md-9">
        <h4 class="claim-hdr" style="color:#fff"> LoremIpsumorem Ipsum Lorem ipsum lorem ipsum Lorem ipsumLoremipsum lorem ipsum.</h4>
        <div class="row">
          <div class="col-xs-12 col-sm-5 col-md-5">
            <label class="control-label " for="name">Date of Birth(MM/DD/YYYY)</label>
            <input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
            <label class="control-label " for="name"> Type</label>
            <input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
          </div>

          <div class="col-xs-12  col-sm-2 col-md-2">
            <h2><span class="label label-warning orPos">OR</span></h2>
          </div>

          <div class="col-xs-12 col-sm-5  col-md-5">
            <label class="control-label " for="name"> Name</label>
            <input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />

            <label class="control-label " for="name">ZIP </label>
            <input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
          </div>
        </div>
      </div>
    </div>
    <!-- end of row -->





  </div>

  
  
</div>

＆＃13;

＆＃13;

＆＃13;