模式响应式屏幕适配

Question

我用的是自举模式。我正在尝试在所有尺寸的屏幕上显示模式。

当我使用更大的屏幕时，它看起来像：

​

​

但在较小的屏幕上，它看起来像这样：

​

​

有人知道如何在较小尺寸的窗口中调整文本和按钮吗？

编辑：

HTML文件中的模式：

<div class="modal fade" id="myModal{{secteur.secteur}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h2 class="modal-title" id="myModalLabel">Achat d'entrées pour le spectacle du <span class="dateModal"></span></h2>
         </div>
         <div class="modal-body">
            <h4>Combien d'entrées désirez-vous acheter dans le secteur {{secteur.secteur}}?</h4>
            {{ form_start(formulaires[secteur.id]) }}
            {{ form_errors(formulaires[secteur.id]) }}
            {{ form_widget(formulaires[secteur.id].quant, {'label': "Quantités"}) }}
         </div>
         <div class="modal-footer">
            {{ form_widget(formulaires[secteur.id].ajouterCont, {'label': "Ajouter et continuer les achats"}) }}
            {{ form_widget(formulaires[secteur.id].ajouterRest, {'label': "Ajouter et passer commande"}) }}
            {{ form_end(formulaires[secteur.id]) }} 
            <button type="button" class="btn btn-danger" data-dismiss="modal">Annuler</button>
         </div>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

模式中窗体的类：

<?php

namespace theatreBundle\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;

class BilletType extends AbstractType {

    private $text;

    public function __construct($text) {
        $this->text = $text;
    }

    public function buildForm(FormBuilderInterface $builder, array $options) {
        $builder
                ->add('dateChoisie', 'hidden')
                ->add('ajouterCont', 'submit', array('attr' => array('class' => 'btn btn-success')))
                ->add('ajouterRest', 'submit', array('attr' => array('class' => 'btn btn-success')))
                ->add('quant', 'choice', array(
                    'choices' => array(
                        '1' => '1',
                        '2' => '2',
                        '3' => '3',
                        '4' => '4',
                        '5' => '5',
                        '6' => '6',
                        '7' => '7',
                        '8' => '8',
                        '9' => '9',
                        '10' => '10',
                        '11' => '11',
                        '12' => '12'
                    ),
                    'preferred_choices' => array('1'),
        ));
    }

    public function getName() {
        return $this->text;
    }

}

Answer 1

只需在modal-header和modal-body类之间添加 <div class="clearfix"></div>，然后在modal-body和modal-footer类之间添加。

，例如

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h2 class="modal-title" id="myModalLabel">
        Achat d'entrées pour le spectacle du 
        <span class="dateModal"></span>
    </h2>
</div>
<div class="clearfix"></div>
<div class="modal-body">
    <h4>Combien d'entrées désirez-vous acheter dans le secteur {{secteur.secteur}}?</h4>
    {{ form_start(formulaires[secteur.id]) }}
    {{ form_errors(formulaires[secteur.id]) }}


    {{ form_widget(formulaires[secteur.id].quant, {'label': "Quantités"}) }}

</div>
<div class="clearfix"></div>
<div class="modal-footer">
    {{ form_widget(formulaires[secteur.id].ajouterCont, {'label': "Ajouter et continuer les achats"}) }}
    {{ form_widget(formulaires[secteur.id].ajouterRest, {'label': "Ajouter et passer commande"}) }}
    {{ form_end(formulaires[secteur.id]) }} 
    <button type="button" class="btn btn-danger" data-dismiss="modal">Annuler</button>
</div>

twitter-bootstrap.的默认类是clearfix类

更新：

您还可以将其添加到modal-header、modal-body和modal-footer的底部。

，例如

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h2 class="modal-title" id="myModalLabel">
        Achat d'entrées pour le spectacle du 
        <span class="dateModal"></span>
    </h2>
    <div class="clearfix"></div>
</div>
<div class="modal-body">
    <h4>Combien d'entrées désirez-vous acheter dans le secteur {{secteur.secteur}}?</h4>
    {{ form_start(formulaires[secteur.id]) }}
    {{ form_errors(formulaires[secteur.id]) }}


    {{ form_widget(formulaires[secteur.id].quant, {'label': "Quantités"}) }}

    <div class="clearfix"></div>
</div>
<div class="modal-footer">
    {{ form_widget(formulaires[secteur.id].ajouterCont, {'label': "Ajouter et continuer les achats"}) }}
    {{ form_widget(formulaires[secteur.id].ajouterRest, {'label': "Ajouter et passer commande"}) }}
    {{ form_end(formulaires[secteur.id]) }} 
    <button type="button" class="btn btn-danger" data-dismiss="modal">Annuler</button>
</div>

希望能有所帮助。

Answer 2

您使用的是哪个Bootstrap版本？使用Bootstrap3中的默认文件，它似乎工作得很好：http://jsfiddle.net/b301ckyv/