Arbeiten mit Bootstrap

Question

Ich arbeite mit Bootstrap und ich versuche, eine einfache Sache wie zwei Textfelder mit ihren Etiketten und einem Kontrollkästchen in einer Zeile und in einer anderen Zeile zwei Textfelder und eine Schaltfläche und wenn ich ihnen eine Vorschau I Siehe das Kontrollkästchen und die Schaltfläche immer in der anderen Zeile, warum ?.

Dies ist mein Code:

<div class="row"> 

    <div class="col-md-4"> 
     <asp:Label ID="lblTitulo" runat="server" AssociatedControlID="txtTitulo" Text="Título"></asp:Label><asp:TextBox ID="txtTitulo" CssClass="form-control" runat="server"></asp:TextBox> 
    </div> 

    <div class="col-md-3"> 
     <asp:Label ID="lblOrden" AssociatedControlID="txtOrden" runat="server" Text="Orden"></asp:Label><asp:TextBox ID="txtOrden" CssClass="form-control" runat="server"></asp:TextBox> 
    </div> 
    <div class="col-md-4"> 
     <asp:Button ID="btnAnadirDimension" CssClass="btn btn-danger" runat="server" Text="Añadir Dimensión" OnClick="btnAnadirDimension_Click" /> 
    </div> 

</div> 


<div class="row"> 
    <div class="col-md-3"> 
      <asp:Label ID="lblNombre" runat="server" AssociatedControlID="txtNombre" Text="Nombre"/><asp:TextBox ID="txtNombre" CssClass="form-control" runat="server"/> 
    </div> 
    <div class="col-md-3"> 
     <asp:Label ID="lblFecha" AssociatedControlID="txtFecha" runat="server" Text="Fecha"/><asp:TextBox ID="txtFecha" CssClass="form-control" runat="server"/> 
    </div> 
    <div class="col-md-2"> 
     <div class="checkbox"> 
       <asp:Label ID="lblDiponible" AssociatedControlID="chkDisponible" runat="server" Text=""/> <asp:CheckBox ID="chkDisponible" runat="server" Text="Disponible" /> 
     </div> 
    </div> 
    <div class="col-md-4"></div> 
    </div> 

Also, warum dies geschehen ?. Wie kann ich es reparieren?. Vielen Dank

Answer 1

Versuchen Sie den Code zu modifizieren, wie unten:

<div class="row"> 
<div class="col-md-12"> 
    <div class="col-md-4"> 
    <asp:Label ID="lblTitulo" runat="server" AssociatedControlID="txtTitulo" Text="Título"></asp:Label><asp:TextBox ID="txtTitulo" CssClass="form-control" runat="server"> 
    </asp:TextBox> 
    </div> 
    <div class="col-md-4"> 
    <asp:Label ID="lblOrden" AssociatedControlID="txtOrden" runat="server" Text="Orden"></asp:Label><asp:TextBox ID="txtOrden" CssClass="form-control" runat="server"> 
    </asp:TextBox> 
    </div> 
    <div class="col-md-4"> 
    <asp:Button ID="btnAnadirDimension" CssClass="btn btn-danger" runat="server" Text="Añadir Dimensión" OnClick="btnAnadirDimension_Click" /> 
    </div> 
    </div> 
</div> 
<div class="row"> 
<div class="col-md-12"> 
    <div class="col-md-4"> 
    <asp:Label ID="lblNombre" runat="server" AssociatedControlID="txtNombre" Text="Nombre"/><asp:TextBox ID="txtNombre" CssClass="form-control" runat="server"/> 
</div> 
<div class="col-md-4"> 
    <asp:Label ID="lblFecha" AssociatedControlID="txtFecha" runat="server" Text="Fecha"/><asp:TextBox ID="txtFecha" CssClass="form-control" runat="server"/> 
</div> 
<div class="col-md-4"> 
    <div class="checkbox"> 
      <asp:Label ID="lblDiponible" AssociatedControlID="chkDisponible" runat="server" Text=""/> <asp:CheckBox ID="chkDisponible" runat="server" Text="Disponible" /> 
    </div> 
</div> 
</div> 
</div>