相同的行文本未垂直对齐

Question

我在ligne上有3个组件，但它没有垂直对齐。 我尝试使用vertical-align但不会更改文本。

就像我们看到的那样，注入不会与Period垂直对齐。

我创建了一个演示

<div class="form-group">
    <label class="col-sm-3 control-lable">
    <input type="checkbox" name="injection" id="injection">Injection</label>
    <label for="period" class="col-sm-3 control-label">Période (sem)</label>
    <div class="col-sm-6">
        <input type="number" min="0" value="52" class="form-control" id="year" name="period" placeholder="Entrer la période en semaine" data-fv-integer="true" data-fv-integer-message="La valeur doit être numérique">
    </div>
</div>

http://jsfiddle.net/1ss81reg/

另外，我评论说如果我缩小和增长窗口，组件的大小

大屏幕

中

小

小屏幕应该像大屏幕一样 大屏幕应该像媒体一样。

Answer 1

您的HTML结构没有意义;您let(:customer) { FactoryGirl.create(:customer, phone: '999') } context 'user not found by phone' do it 'creates a new customer' do expect{ post :create, customer: attributes_for(:customer, phone: "999") }.to change(Customer, :count).by 1 end it 'redirects to the customer path' do post :create, customer: attributes_for(:customer, phone: "999") customer = Customer.last expect(response).to redirect_to(customer) #this is another differentiator between the case where a customer is #found and when one is created expect(flash[:notice).to eq "Customer was successfully saved" end end context 'user not found by phone' do before(:each) do #here we create the customer before each test in this context customer end it 'does not create a new customer' do expect{ post :create, customer: attributes_for(:customer, phone: customer.phone) }.not_to change(Customer, :count) end it 'redirects to the customer path' do post :create, customer: attributes_for(:customer, phone: customer.phone) customer = Customer.last expect(response).to redirect_to(customer) #this is another differentiator between the case where a customer is #found and when one is created expect(flash[:notice).to be_nil end end 和columns互相嵌套（无论如何都不需要），并且不能同时使用任何rows元素。另外，form-horizontal需要container，因为在rows使用form-group。

请参阅工作示例代码段。也许这会有所帮助。

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div role="tabpanel">
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="enable"><a href="#medicalTab" data-toggle="tab">Médical</a>

    </li>
    <li role="presentation" class="enable"><a href="#medicalTab2" data-toggle="tab">Médical 2</a>

    </li>
  </ul>
</div>
<div id='content' class="tab-content">
  <div role="tabpanel" class="tab-pane" id="medicalTab">
    <div class="container">
      <div id="lodgerMedicalContactDivTemplate"></div>
      <form class="form-horizontal">
        <div class="form-group">
          <div class="col-sm-8 col-sm-offset-2">
            <label class="checkbox-inline">
              <input type="checkbox" name="medicate" id="medicate">Médicale</label>
            <label class="checkbox-inline">
              <input type="checkbox" name="diabete" id="diabete">Diabète</label>
            <label class="checkbox-inline">
              <input type="checkbox" name="injection" id="injection">Injection</label>
          </div>
        </div>
        <div class="form-group">
          <label for="year" class="col-sm-2 control-label">Période (sem)</label>
          <div class="col-sm-10">
            <input type="number" class="form-control" min="0" value="52" id="year" name="period" placeholder="Entrer la période en semaine">
          </div>
        </div>
        <div class="form-group">
          <label for="medicalDrawer" class="col-sm-2 control-label">Tiroir médicale</label>
          <div class="col-sm-10">
            <select id="medicalDrawer" name="medicalDrawerId" class="form-control"></select>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary" id="lodgerMedicalSave">Sauvegarder</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="medicalTab2">Content 2</div>
</div>

＆＃13;

＆＃13;

＆＃13;