-2
votes

Application de formulaire Web

sur ma forme Web, il y a un espace blanc sur le côté droit, comment le supprimer ou redimensionner le panneau?

J'ai essayé Padding code> et Marge code> largeur code> pour le panneau et le conteneur, mais cela ne fonctionne pas. p>

p>



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>

<div class="container"  >
  <div class="panel panel-primary" >
    <div class="panel-heading" >
      <h3 class="panel-title ">Personal Infomation</h3>
    </div>
    <div class="panel-body " >
      <br>
      <div id="p_info">
        <div class="row">
          <div class="col-md-6">
            <label class="control-label">First Name</label>
            <input class="form-control" id="first_name" >
          </div>
        </div>
        <div class="row" >
          <div class="col-md-6">
            <label class="control-label">Last Name</label>
            <input class="form-control" id="last_name" >
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <label class="control-label">Gender</label>
            <select class="form-control field" id="sel1" >
              <option disabled selected value> -- select an option -- </option>
              <option>Male</option>
              <option>Female</option>
            </select>
          </div> 
        </div>
        <div class="row">
           <div class="col-md-6">
            <label class="control-label">Date of Birth</label>
            <input type="date" name="bdaytime" class="form-control" id="DOB"   >
           </div>
        </div>
        <div class="row">
           <div class="col-md-6">
            <label class="control-label">Place of Birth</label>
            <input class="form-control" id="Place" >
           </div>
        </div>
       </div>
    </div>
  </div>
</div>

html css twitter-bootstrap

0 commentaires

3 Réponses :

0
votes

Est-ce ce que vous recherchez?

<!DOCTYPE html>
<html>
<head>
<title></title>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <style>
  .container {
    margin-top: 50px; 
  }


  </style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" ></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>


</head>
<body>

<div class="container"  >
  <div class="panel panel-primary" >
    <div class="panel-heading" >
      <h3 class="panel-title ">Personal Infomation</h3>
    </div>
    <div class="panel-body " >
      <br>
      <div id="p_info">
        <div class="row">
          <div class="col-md-6">
            <label class="control-label">First Name</label>
            <input class="form-control" id="first_name" >
          </div>
        </div>
        <div class="row" >
          <div class="col-md-6">
            <label class="control-label">Last Name</label>
            <input class="form-control" id="last_name" >
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <label class="control-label">Gender</label>
            <select class="form-control field" id="sel1" >
              <option disabled selected value> -- select an option -- </option>
              <option>Male</option>
              <option>Female</option>
            </select>
          </div> 
        </div>
        <div class="row">
           <div class="col-md-6">
            <label class="control-label">Date of Birth</label>
            <input type="date" name="bdaytime" class="form-control" id="DOB"   >
           </div>
        </div>
        <div class="row">
           <div class="col-md-6">
            <label class="control-label">Place of Birth</label>
            <input class="form-control" id="Place" >
           </div>
        </div>
       </div>
    </div>
  </div>
</div>  
</body>
</html>

0 commentaires

1
votes

bootstrap utilise une requête de support pour la classe .col-md-6 où il passe de la largeur complète à la demi-largeur avec un écran supérieur à 992px: xxx

Vous pouvez soit créer vos propres règles CSS ou utiliser un style en ligne (par exemple, ) pour remplacer ce style bootstrap règle.

1 commentaires La requête des médias peut avoir la priorité sur un style en ligne puisqu'il peut avoir une spécificité plus importante (je n'ai pas pu trouver de la documentation pour confirmer ou nier cela, mais cela peut être le cas). Je recommanderais d'ajouter une étiquette de style après la feuille de style est liée qui ressemble à ceci: