引导网格内的iframe

下面的代码工作不正常工作：引导网格内的iframe

<div class="modal fade" id="Edit" data-backdrop="static"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body" style="text-align: center"> 
       <div class="row"> 
        <div class="col-sm-4"> 
         <asp:TextBox ID="EditCidade" runat="server" CssClass="form-control"></asp:TextBox> 
        </div> 
        <div class="col-sm-4"> 
         <asp:TextBox ID="EditEmpresa" runat="server" CssClass="form-control"></asp:TextBox> 
        </div> 
        <div class="col-sm-4"> 
         <asp:TextBox ID="EditFuncionario" runat="server" CssClass="form-control"></asp:TextBox> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

三个textboxs是在同一行，走的是面积的33％。但后来我试图把模态放入IFrame中，三个文本框再次占据整行，“col-sm-4”似乎没有任何作用。

<div class="modal fade" id="Edit" data-backdrop="static"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <iframe runat="server" id="editIFrame" style="width: 100%; height: 270px" frameborder="0" src="EditField"></iframe> 
     </div> 
    </div> 
</div>

和自身的IFrame：

<body> 
    <form id="form2" runat="server"> 
     <div class="modal-body" style="text-align: center"> 
      <div class="row"> 
       <div class="col-sm-4"> 
        <asp:TextBox ID="EditCidade" runat="server" CssClass="form-control"></asp:TextBox> 
       </div> 
       <div class="col-sm-4"> 
        <asp:TextBox ID="EditEmpresa" runat="server" CssClass="form-control"></asp:TextBox> 
       </div> 
       <div class="col-sm-4"> 
        <asp:TextBox ID="EditFuncionario" runat="server" CssClass="form-control"></asp:TextBox> 
       </div> 
      </div> 
     </div> 
    </form> 
</body>

我怀疑<形式>有事做，而是因为我使用ASP我不能把它关闭... 或者它是IFrame的宽度/高度......无论如何，我不知道如何解决它，我需要帮助。

来源

2015-07-20 Lucas

PS：我使用COL-SM，COL-MD，COL-LG，COL-XS试过，这些都没有作品 – Lucas

什么iframe标记是否在你的页面中插入一个全新的文档。我认为你需要在你的iframe内容中再次链接bootstrap。还引导网格系统需要 '容器' 或 '容器流体' 类作为行的父：

<body> 
    <head> 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <form id="form2" runat="server"> 
        <!--added container class --> 
     <div class="modal-body container" style="text-align: center"> 
      <div class="row"> 
       <div class="col-sm-4"> 
        <asp:TextBox ID="EditCidade" runat="server" CssClass="form-control"></asp:TextBox> 
       </div> 
       <div class="col-sm-4"> 
        <asp:TextBox ID="EditEmpresa" runat="server" CssClass="form-control"></asp:TextBox> 
       </div> 
       <div class="col-sm-4"> 
        <asp:TextBox ID="EditFuncionario" runat="server" CssClass="form-control"></asp:TextBox> 
       </div> 
      </div> 
     </div> 
    </form> 
</body>

来源

2015-07-20 15:36:09 Keammoort

我做了，没有效果。 – Lucas

我添加了“容器”类，现在就试试@Lucas – Keammoort

使用容器类和col-xs。解决了，谢谢 – Lucas

引导网格内的iframe

回答

相关问题