Question

我真的需要你的帮助来正确格式化/定位我的表单字段及其标签，并使用正确的缩进和边距。标签＆＃34;类别A＆＃34;和＆＃34;类别B＆＃34;只是示例文本，但实际上它们将动态地更改其内容和长度，因此在它重叠到＆＃34; Button1＆＃34;之前自动换行是很重要的。和＆＃34; Button2＆＃34;元素。我在这里使用bootstrap使我的字段响应。

这是我想要实现的实际设计格式：

这是我目前的代码。

JSFIDDLE

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group ">
	<label class="control-label col-xs-6 col-md-3" for="main-field-1">Field 1</label>
	<div class="form_field col-xs-6 col-md-9  required">
        <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text">     
    <div class="" style="display:none"></div>
	</div>
</div>

<div class="form-group ">
	<label class="control-label col-xs-6 col-md-3" for="main-field-2">Field 2</label>
	<div class="form_field col-xs-6 col-md-9  required">
        <input class="form-control " id="main-label-2" name="main-field-2" placeholder="Number" title="Enter Value" type="text">    
        <div class="" style="display:none"></div>
	</div>
</div>

<h4>
Other Fields
</h4><BR><BR>

CATEGORY A <button class="btn btn-primary" style="min-width:55px;margin-right:3px;margin-bottom:3px;padding:3px" title="">Button 1</button><button class="btn btn-primary" style="min-width:55px;margin-right:3px;margin-bottom:3px;padding:3px" title="">Button 2</button>


<div class="form-group ">
	<label class="control-label col-xs-6 col-md-3" for="main-field-1">Field 1</label>
	<div class="form_field col-xs-6 col-md-9  required">
        <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text">     
    <div class="" style="display:none"></div>
	</div>
</div>

<div class="form-group ">
	<label class="control-label col-xs-6 col-md-3" for="main-field-2">Field 2</label>
	<div class="form_field col-xs-6 col-md-9  required">
        <input class="form-control " id="main-label-2" name="main-field-2" placeholder="Number" title="Enter Value" type="text">    
        <div class="" style="display:none"></div>
	</div>
</div>

CATEGORY B <button class="btn btn-primary" style="min-width:55px;margin-right:3px;margin-bottom:3px;padding:3px" title="">Button 1</button><button class="btn btn-primary" style="min-width:55px;margin-right:3px;margin-bottom:3px;padding:3px" title="">Button 2</button>


<div class="form-group ">
	<label class="control-label col-xs-6 col-md-3" for="main-field-1">Field 1</label>
	<div class="form_field col-xs-6 col-md-9  required">
        <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text">     
    <div class="" style="display:none"></div>
	</div>
</div>

<div class="form-group ">
	<label class="control-label col-xs-6 col-md-3" for="main-field-2">Field 2</label>
	<div class="form_field col-xs-6 col-md-9  required">
        <input class="form-control " id="main-label-2" name="main-field-2" placeholder="Number" title="Enter Value" type="text">    
        <div class="" style="display:none"></div>
	</div>
</div>

＆＃13;

Answer 1

您需要调整网格的颜色大小以便按您的需要显示。

看一下网格文档：

https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

此外，您对手机的大小不同，我不确定您是否需要。

如果您的问题是关于屏幕截图中的前两个字段，请尝试使用col-md-2作为标签，使用col-md-10作为字段。请记住，行的总数必须始终为12

Answer 2

我认为您可能需要使用一些 offsets 来实现您的目标

以下是您可能需要查看整页的一种解决方案，因为我没有优化较小的视口。（如果你想要不同的东西，我会留给你的）

另请注意，较长的类别将根据需要换行我不确定你是否知道 btn-sizing 类

另一个可能导致您遇到问题的注意事项是尝试使用内联样式，可能会在可能的情况下破坏某些引导类，找到适合您需要的引导类或创建适合您需要的自定义类。它使编辑更容易

＆＃13;

.other-fields {
  margin: 40px 0 20px;
  font-weight: 700;
}

.btn-custom {
  min-width: 55px;
  margin-right: 3px;
  margin-bottom: 3px;
  padding: 3px
}
.row.row-fg.category{
  margin-top:20px;
  margin-bottom:20px;
}

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->    
<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
<form class="form">
  <div class="row row-fg ">
    <label class="control-label  col-md-3" for="main-field-1">Field 1</label>
    <div class="form_field  col-md-9  required">
      <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text">
      <div class="" style="display:none"></div>
    </div>
  </div>

  <div class="row row-fg ">
    <label class="control-label  col-md-3" for="main-field-2">Field 2</label>
    <div class="form_field  col-md-9  required">
      <input class="form-control " id="main-label-2" name="main-field-2" placeholder="Number" title="Enter Value" type="text">
      <div class="" style="display:none"></div>
    </div>
  </div>
  <div class="of-cont">

    <h4 class="other-fields">Other Fields</h4>

    <div class="row row-fg category">
      <div class="col-md-offset-1 col-md-3">
        CATEGORY A
      </div>
      <div class="col-md-8">
        <button class="btn btn-primary btn-custom">Button 1</button>
        <button class="btn btn-primary btn-custom" title="">Button 2</button>
      </div>
    </div>


    <div class="row row-fg ">
      <label class="control-label col-md-offset-1  col-md-2 text-right" for="main-field-1">Field 1</label>
      <div class="form_field col-md-offset-1  col-md-8  required">
        <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text">
        <div class="" style="display:none"></div>
      </div>
    </div>


    <div class="row row-fg ">
      <label class="control-label col-md-offset-1  col-md-2 text-right" for="main-field-1">Field 1</label>
      <div class="form_field col-md-offset-1  col-md-8  required">
        <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text">
        <div class="" style="display:none"></div>
      </div>
    </div>

  </div>

  <div class="row row-fg category">
    <div class="col-md-offset-1 col-md-3">

      CATEGORY B is a long title that should wrap lines. Notice these btns are using btn sizing classes

    </div>
    <div class="col-md-8">
      <button class="btn btn-primary  btn-xs">Button 1</button>
      <button class="btn btn-primary  btn-sm" title="">Button 2</button>
    </div>
  </div>


  <div class="row row-fg ">
    <label class="control-label col-md-offset-1 col-md-2 text-right" for="main-field-1">Field 1</label>
    <div class="form_field col-md-offset-1  col-md-8  required">
      <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text">
      <div class="" style="display:none"></div>
    </div>
  </div>


  <div class="row row-fg ">
    <label class="control-label col-md-offset-1  col-md-2 text-right" for="main-field-1">Field 1</label>
    <div class="form_field col-md-offset-1 col-md-8  required">
      <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text">
      <div class="" style="display:none"></div>
    </div>
  </div>
  </form>
</div>

＆＃13;

正确对齐字段

2 个答案: