col

col

关注
发信
关注(28)粉丝(399)

css - Twitter bootstrap 列布局问题

我在下面有以下代码，我遇到的问题是，无论我做什么，我都注意到，由于右侧似乎有很多多余的东西，所以我似乎无法减少多余的真实状态的右边。步骤1和步骤2中的空格。

我试图使它在台式机，平板电脑和移动设备上达到平衡。

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

这是我的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;
       }

最佳答案

一些东西：


您有错别字.col-sm10，应该是.col-sm-10
在您的某一行中，您总共有10个cols。当引导程序的最大值为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


片段



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

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

关于css - Twitter bootstrap 列布局问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37056162/

10-16 22:00
Powered by LMLPHP ©2024 col 0.027111