为什么输入框完全溢出其边界div？

时间：2017-06-06 13:25:23

标签： html css twitter-bootstrap twitter-bootstrap-3

我打算在表格的一行中排列4个相同大小的列中的4个输入文本框。利用Bootstrap的网格列类，我将col- -3分配给中等和大屏幕尺寸到这四个输入div。 同样，对于小尺寸和超小尺寸，我将它们分配为col - -12，以便输入占据它们自己的整行。然后我的导游希望减小输入框尺寸。我将偏移类添加到四个输入并将其列跨度减少到6列。这些都是适当的中心。

但是，这个改变搞砸了我的小屏幕布局。现在每行只有两个输入，而另一行中有两个输入。

＆＃13;
＆＃13; 
/* button modification*/

#button-wrapper {
  width: 40%;
  min-width: 200px;
  margin: 0 auto;
}

#ebook-download-button {
  margin: auto 0.5em;
}

.inner {
  margin: 0 auto 0 auto;
  width: 150px;
  padding: 0;
  /* center the block element*/
}

img {
  min-width: 100%;
}

input {
  height: 60%;
  margin: 0px;
}


/* square boxes*/

.square-elem {
  border-radius: 0px;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body>



  <form id="registration-form" class="">
    <!--<div class="col-md-12 col-sm-12">-->
    <div class="row">
      <div class="col-lg-3 col-md-3 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3 ">
        <div class="form-group">
          <input type="input" class="form-control square-elem" id="first-name" placeholder="First Name">
        </div>
      </div>

      <div class="col-lg-3 col-md-3 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">
        <div class="form-group">
          <input type="input" class="form-control square-elem" id="last-name" placeholder="Last Name">
        </div>
      </div>

      <div class="col-lg-3 col-md-3 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">
        <div class="form-group">
          <input type="input" class="form-control square-elem" id="company" placeholder="Company">
        </div>
      </div>

      <div class="col-lg-3 col-md-3 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">
        <div class="form-group">
          <input type="input" class="form-control square-elem" id="email" placeholder="Email">
        </div>
      </div>
    </div>
    <div class="row">
      <div id="button-wrapper" style="">
        <div id="ebook-download-button" class="col-md-12 col-sm-12 col-xs-12 text-center">
          <a href="#" role="button" class="btn btn-danger btn-download form-control square-elem" value=""> DOWNLOAD EBOOK </a>
        </div>
      </div>
    </div>
    <!-- </div>
	 -->
  </form>






</body>
＆＃13;
＆＃13;
＆＃13;

这里也是JSFiddle（拖动框架）。似乎输入（在每个表格组div中）完全位于其边界div框之外。预期输出应该是在一行中并排排列的四个输入。 这可能是什么问题？

4 个答案:

答案 0 :(得分：1)

如果您的问题是，偏移量仍然在更大的屏幕中，您必须反转每个其他col-class的偏移量。将col-md-offset-0添加到您为较小设备指定偏移量的div / p> 

/* button modification*/

#button-wrapper {
  width: 40%;
  min-width: 200px;
  margin: 0 auto;
}

#ebook-download-button {
  margin: auto 0.5em;
}

.inner {
  margin: 0 auto 0 auto;
  width: 150px;
  padding: 0;
  /* center the block element*/
}

img {
  min-width: 100%;
}

input {
  height: 60%;
  margin: 0px;
}


/* square boxes*/

.square-elem {
  border-radius: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body>



  <form id="registration-form" class="">
    <!--<div class="col-md-12 col-sm-12">-->
    <div class="row">
      <div class="col-lg-3 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3 ">
        <div class="form-group">
          <input type="input" class="form-control square-elem" id="first-name" placeholder="First Name">
        </div>
      </div>

      <div class="col-lg-3 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">
        <div class="form-group">
          <input type="input" class="form-control square-elem" id="last-name" placeholder="Last Name">
        </div>
      </div>

      <div class="col-lg-3 col-md-3 col-sm-6 col-md-offset-0 col-sm-offset-3 col-xs-6 col-xs-offset-3">
        <div class="form-group">
          <input type="input" class="form-control square-elem" id="company" placeholder="Company">
        </div>
      </div>

      <div class="col-lg-3 col-md-3 col-sm-6 col-md-offset-0 col-sm-offset-3 col-xs-6 col-xs-offset-3">
        <div class="form-group">
          <input type="input" class="form-control square-elem" id="email" placeholder="Email">
        </div>
      </div>
    </div>
    <div class="row">
      <div id="button-wrapper" style="">
        <div id="ebook-download-button" class="col-md-12 col-sm-12 col-xs-12 text-center">
          <a href="#" role="button" class="btn btn-danger btn-download form-control square-elem" value=""> DOWNLOAD EBOOK </a>
        </div>
      </div>
    </div>
    <!-- </div>
   -->
  </form>






</body>

答案 1 :(得分：0)

您有类col-sm-offset-3和col-xs-offset-3这些类'推'列有3列的列。所以输入的边距等于3列宽

在此处查看更多＆gt; http://getbootstrap.com/css/#grid-offsetting

删除这些类，一切正常

点击此处fiddle <或p>下面的片段 

/*Main box*/
div #ebook-registration-box
{
  border: 2px solid #d3d3d3;
  padding: 10px;
  margin: 10px auto;
}

/* button modification*/
#button-wrapper
{
  width: 40%;
  min-width: 200px;
  margin: 0 auto;
  
}

#ebook-download-button
{
  margin: auto 0.5em;
}

 .inner
{
  margin: 0 auto 0 auto;
  width: 150px;
  
  padding: 0 ;
  
  /* center the block element*/
}

/* fixed height for responsive images
   (does not work)*/ 
img 
{
  
  min-width: 100%;
}

input
{
 
  height: 60%;
  margin: 0px;
}



/* square boxes*/
.square-elem
{
  border-radius: 0px;  
}
/* */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="ebook-registration-box" class="row">
  <div class="col-md-12" > 
   
  <div id="registration-header" class="row">
     <div class="col-md-12">
        <p class="text-center">
           Register to download the device launch guide
        </p>
     </div>
  </div>
   <!-- 4 form elements--> 
 
 
 <form id="registration-form" class="" >
   <!--<div class="col-md-12 col-sm-12">-->
     <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6  col-xs-6 ">
			<div class="form-group">	
			<input type="input" class="form-control square-elem" id="first-name" placeholder="First Name">
            </div>
        </div>	
         
         <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 ">
           <div class="form-group">				
            <input type="input" class="form-control square-elem" id="last-name" placeholder="Last Name">
		   </div>
         </div>	
      
         <div class="col-lg-3 col-md-3 col-sm-6  col-xs-6 ">
           <div class="form-group">
			<input type="input" class="form-control square-elem" id="company" placeholder="Company">
		   </div>
         </div>
      
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
				
           <div class="form-group">
			   <input type="input" class="form-control square-elem" id="email" placeholder="Email">  
           </div> 
        </div>
      </div>
      
       <!-- Download Button                   -->
     <div class="row">
        <div id="button-wrapper"  style="">
         <div id="ebook-download-button" class="col-md-12 col-sm-12 col-xs-12 text-center">             
          <a href="#" role="button" class="btn btn-danger btn-download form-control square-elem"  value=""> DOWNLOAD EBOOK </a>
         </div>
        </div>
      </div>  <!-- </div>-->
    
  </form>
    </div>   
 </div>

答案 2 :(得分：-1)

这是你想要的吗？您只需要禁用较大宽度的偏移量，并使xs宽度的偏移量更小。

#button-wrapper {
  width: 40%;
  min-width: 200px;
  margin: 0 auto;
}

#ebook-download-button {
  margin: auto 0.5em;
}

.inner {
  margin: 0 auto 0 auto;
  width: 150px;
  padding: 0;
  /* center the block element*/
}

img {
  min-width: 100%;
}

input {
  height: 60%;
  margin: 0px;
}


/* square boxes*/

.square-elem {
  border-radius: 0px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="ebook-registration-box" class="row">
  <div class="col-md-12" > 
   
  <div id="registration-header" class="row">
     <div class="col-md-12">
        <p class="text-center">
           Register to download the device launch guide
        </p>
     </div>
  </div>
   <!-- 4 form elements--> 
 
 
 <form id="registration-form" class="" >
   <!--<div class="col-md-12 col-sm-12">-->
     <div class="row">
        <div class="col-lg-3 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1 ">
			<div class="form-group">	
			<input type="input" class="form-control square-elem" id="first-name" placeholder="First Name">
            </div>
        </div>	
         
         <div class="col-lg-3 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
           <div class="form-group">				
            <input type="input" class="form-control square-elem" id="last-name" placeholder="Last Name">
		   </div>
         </div>	
      
         <div class="col-lg-3 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
           <div class="form-group">
			<input type="input" class="form-control square-elem" id="company" placeholder="Company">
		   </div>
         </div>
      
        <div class="col-lg-3 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
           <div class="form-group">
			   <input type="input" class="form-control square-elem" id="email" placeholder="Email">  
           </div> 
        </div>
      </div>
      <div class="row">
        <div id="button-wrapper"  style="">
         <div id="ebook-download-button" class="col-md-12 col-sm-12 col-xs-12 text-center">             
          <a href="#" role="button" class="btn btn-danger btn-download form-control square-elem"  value=""> DOWNLOAD EBOOK </a>
         </div>
        </div>
      </div>  <!-- </div>-->
    
  </form>
    </div>   
 </div>

答案 3 :(得分：-1)

您还可以在"form-inline"上使用<form>课程进行水平表格显示。

相关问题
最新问题