Yukina Spoonatte Yukina Spoonatte - 12 days ago 5
CSS Question

Grid system in bootstrap doesn't work properly

I have a div with the

row
class, inside this div I have two nested divs, one with
col-md-3
and the other with
col-md-9
.

So the div with the
row
class takes the whole space as expected :

enter image description here

But the problem is in the div with
col-md-9
it doesn't take the space that it should take, as you can see in this picture :

enter image description here

So why I'm getting this behaviour ?

PS : for the
contenu-central
class it has only a
padding-left: 0px;

and a
padding-right: 0px;


Edit :



This is the code I'm using :

<div class="row">
<!-- Menu -->
<div class="col-md-3 contenu-central ui-tabs ui-widget ui-widget-content ui-corner-all ui-hidden-container ui-tabs-left"
style="width: 190px;">

<ul class="prestation-left-panel ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist" style="width: 100%; height: auto;">
<li class="ui-state-default ui-corner-left menu-prestation ui-tabs-selected" role="patient" data-step-id="1">
<a>Patient</a>
</li>
<li class="ui-state-default ui-corner-left menu-prestation" role="prescription" data-step-id="2">
<a>Prescription</a>
</li>
<li class="ui-state-default ui-corner-left menu-prestation" role="transport" data-step-id="3">
<a>Transport</a>
</li>
<li class="ui-state-default ui-corner-left menu-prestation" role="tarification" data-step-id="4">
<a>Tarification</a>
</li>

</ul>

<ul class="prestation-left-panel ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist"
style="width: 100%; height: auto;margin-top:50px" >
<!-- Problématique -->
<li class="ui-state-default ui-corner-left menu-prestation" role="problematique" data-step-id="5"
style="display: #{beanFormPrestationTransport.masqueProblematique() and !beanFormPrestationTransport.isDevis() ? '' : 'none'}">
<a>
<h:outputText id="libNbProblematique" value="Problématiques #{beanFormPrestationTransport.nbProblematiques}" />
</a>
</li>

<li class="ui-state-default ui-corner-left menu-prestation" role="piecesManquantes" data-step-id="6"
style="display: #{menuBean.optionPiecesManquantes() and !beanFormPrestationTransport.isDevis() ? '' : 'none'}">
<a>
<h:outputText id="libNbPiecesManquantes" styleClass="libNbPiecesManquantes" value="Pièces manquantes #{beanFormPrestationTransport.nbPiecesManquantes}" />
</a>
</li>

<li class="ui-state-default ui-corner-left menu-prestation" role="pieceJointePrestation" data-step-id="7"
style="display: #{menuBean.activiteTransport() and menuBean.optionScanDocuments() and !beanFormPrestationTransport.isDevis() ? '' : 'none'}">
<a>Documents</a>
</li>

<li class="ui-state-default ui-corner-left menu-prestation" role="courriersPrestation" data-step-id="8"
style="display: #{!beanFormPrestationTransport.isDevis() ? '' : 'none'}">
<a>Courriers</a>
</li>
</ul>
</div>

<!-- Views-->
<div class="col-md-9 contenu-central">
<p:panel styleClass="form-prestation">
<div id="patient" class="tab-prestation">
<ui:include src="patient.xhtml"/>
</div>
<div id="prescription" class="tab-prestation" style="display:none;">
<ui:include src="prescription.xhtml"/>
</div>
<div id="transport" class="tab-prestation" style="display:none;">
<ui:include src="transport.xhtml"/>
</div>
<div id="tarification" class="tab-prestation" style="display:none;">
<ui:include src="tarification.xhtml"/>
</div>
<div id="problematique" class="tab-prestation" style="display:none;">
<ui:include src="problematique.xhtml"/>
</div>
<div id="piecesManquantes" class="tab-prestation" style="display:none;">
<ui:include src="piecesManquantes.xhtml"/>
</div>
<div id="pieceJointePrestation" class="tab-prestation" style="display:none;">
<ui:include src="pieceJointePrestation.xhtml"/>
</div>
<div id="courriersPrestation" class="tab-prestation" style="display:none;">
<ui:include src="courriersPrestation.xhtml"/>
</div>
<ui:include src="/gestionCPS.xhtml"/>
</p:panel>
</div>


<ui:include src="../confirmScindagePrestation.xhtml"/>
<ui:include src="../confirmScindageSurAgence.xhtml"/>

</div>

Answer

There could be a few things wrong.

  • Make sure other aspects of bootstrap are working
  • It looks like you have a col-md-9 and a col-md-2, I don't see a 3
  • Double check your CSS and make sure there isn't anything limiting the size and overwriting the bootstrap CSS
Comments