Difficulty in positioning table on screen with bootstrap - layout only

1

I need to do a layout on my page, as follows. That I have three textbox controls, one underneath the other and taking the other side all the rest with a table. See below how I need it.

Ihavetriedinmanyways,reducingmygridfrom12to6andwhathappenswhenIputtheimageisasfollows:Theimageactuallysitstotherightofthecontrols,butpushesthecontrolsdown.ThetableImadeisjustanexample.

Seebelowhowthescreenwas

This is my cshtml. This table is just for testing, the values have nothing to do, I'm just testing the screen layout.

@{
    ViewBag.Title = "CadastroAcesso";
    Layout = "~/Views/Shared/_LayoutBase.cshtml";
}

<h2>Cadastro de Acesso ao Sistema</h2>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-2">
                <label for="txtUsuarioRede">Usuário de Rede:</label>
            </div>
            <div class="col-md-4">
                <input type="text" class="form-control col-md-6" name="txtUsuarioRede" id="txtUsuarioRede" placeholder="Digite um usuáruo da rede">
            </div>
            <table data-url="data1.json" data-height="299" data-sort-name="name" data-sort-order="desc" border="1">
                <thead>
                    <tr>
                        <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
                        <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
                        <th data-field="price" data-sortable="true">Item Price</th>
                    </tr>
                </thead>
                <thead>
                    <tr>
                        <th data-field="id" class="col-md-2">Item ID</th>
                        <th data-field="name" class="col-md-6">
                            <i class="glyphicon glyphicon-star"></i>
                            Item Name
                        </th>
                        <th data-field="price" class="col-md-4">
                            <i class="glyphicon glyphicon-heart"></i>
                            Item Price
                        </th>
                    </tr>
                    <tr>
                        <th data-field="id" class="col-md-2">Item ID</th>
                        <th data-field="name" class="col-md-6">
                            <i class="glyphicon glyphicon-star"></i>
                            Item Name
                        </th>
                        <th data-field="price" class="col-md-4">
                            <i class="glyphicon glyphicon-heart"></i>
                            Item Price
                        </th>
                    </tr>
                    <tr>
                        <th data-field="id" class="col-md-2">Item ID</th>
                        <th data-field="name" class="col-md-6">
                            <i class="glyphicon glyphicon-star"></i>
                            Item Name
                        </th>
                        <th data-field="price" class="col-md-4">
                            <i class="glyphicon glyphicon-heart"></i>
                            Item Price
                        </th>
                    </tr>
                </thead>
            </table>
        </div>

        <div class="col-md-12">
            <div class="col-md-2">
                <label for="txtUsuarioRede">Usuário de Rede:</label>
            </div>
            <div class="col-md-4">
                <input type="text" class="form-control col-md-6" name="txtUsuarioRede" id="txtUsuarioRede2" placeholder="Digite um usuáruo da rede">
            </div>

        </div>

    </div>
</div>
    
asked by anonymous 29.08.2014 / 13:21

1 answer

4

I would put the table in one column and the inputs in another, to divide the screen. I do not know if it's what you want but it would look like this:

<div class="container">
<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-2">
                <label for="txtUsuarioRede">Usuário de Rede:</label>
            </div>
            <div class="col-md-4">
                <input type="text" class="form-control col-md-6" name="txtUsuarioRede" id="txtUsuarioRede" placeholder="Digite um usuáruo da rede">
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <label for="txtUsuarioRede">Usuário de Rede:</label>
            </div>
            <div class="col-md-4">
                <input type="text" class="form-control col-md-6" name="txtUsuarioRede" id="txtUsuarioRede2" placeholder="Digite um usuáruo da rede">
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <table data-url="data1.json" data-height="299" data-sort-name="name" data-sort-order="desc" border="1">
            <thead>
                <tr>
                    <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
                    <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
                    <th data-field="price" data-sortable="true">Item Price</th>
                </tr>
            </thead>
            <thead>
                <tr>
                    <th data-field="id" class="col-md-2">Item ID</th>
                    <th data-field="name" class="col-md-6">
                        <i class="glyphicon glyphicon-star"></i>
                        Item Name
                    </th>
                    <th data-field="price" class="col-md-4">
                        <i class="glyphicon glyphicon-heart"></i>
                        Item Price
                    </th>
                </tr>
                <tr>
                    <th data-field="id" class="col-md-2">Item ID</th>
                    <th data-field="name" class="col-md-6">
                        <i class="glyphicon glyphicon-star"></i>
                        Item Name
                    </th>
                    <th data-field="price" class="col-md-4">
                        <i class="glyphicon glyphicon-heart"></i>
                        Item Price
                    </th>
                </tr>
                <tr>
                    <th data-field="id" class="col-md-2">Item ID</th>
                    <th data-field="name" class="col-md-6">
                        <i class="glyphicon glyphicon-star"></i>
                        Item Name
                    </th>
                    <th data-field="price" class="col-md-4">
                        <i class="glyphicon glyphicon-heart"></i>
                        Item Price
                    </th>
                </tr>
            </thead>
        </table>
    </div>
</div>

    
29.08.2014 / 13:34