Question

我是HTML新手。我想知道你是否可以在HTML中并行设置两个表单。我用Tkinter生成了这个示例GUI，我想为带有Bootstrap样式的GUi生成一个HTML文件。

GUI

Answer 1

这样的事情可以做到:(边界只是让你可以看到效果。）

＆＃13;

div
{
  border: 1px solid red;
}

#left
{
  float: left;
  width: 64%;
}

#right
{
  float: right;
  width: 35%;
}

＆＃13;

<div id="left">Left Stuff</div>
<div id="right">Right Stuff</div>

＆＃13;

Answer 2

好的，听起来像是一个表单，你只是希望它以某种方式设置：

<div class="row">
<div class="form-group">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <p>Settings</p>
        <label for="label-name" class="control-label">Label1</label>
        <input type="text" class="form-control" id="some-text">
        <label for="label-name" class="control-label">Label2</label>
        <input type="text" class="form-control" id="some-text">
        <label for="label-name" class="control-label">Label3</label>
        <input type="text" class="form-control" id="some-text">
    </div>

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
          <p>Options</p>
          <label for="label-name" class="control-label">Label4</label>
          <input type="checkbox"></br>
          <label for="label-name" class="control-label">Label5</label>
          <input type="checkbox"></br>
          <label for="label-name" class="control-label">Label6</label>
          <input type="checkbox">
       </div>
    </div>
</div>
<div class="row">    
    <div class="col-md-6">
        <button type="button" class="btn btn-default">Run</button>
    </div>
</div>

Answer 3

...是的

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

    <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
        <form action="" method="POST" class="form-horizontal" role="form">
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-default">SUBMIT</button>
            </div>
        </form>
    </div>

    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>

    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
        <form action="" method="POST" class="form-horizontal" role="form">
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-default">SUBMIT</button>
            </div>
        </form>
    </div>

</div>

希望这有帮助

Answer 4

我不知道你的html文件，但我认为bootstrap可以提供内置的解决方案。只需参考official documentation，然后从这样的基本模板开始：

<div class="container">
    <div class="row">
        <div class="col-sm-8"> <--the big form-->
            <form id="big">
                <div class="form-group">
                ...
                </div>
            </form>
        </div>
        <div class="col-sm-4"> <--the small one-->
            <form id="small">
                <div class="form-group">
                ...
                </div>
            </form>
        </div>
    </div>
</div>

您可以使用许多其他类，当然也可以在样式表中自定义您自己的类

Answer 5

好吧，如果你正在使用Bootstrap，那很容易。请尝试以下方法：

<html>
    <head>
        <title>Sample</title>

        <link rel="stylesheet" type="text/css" href="bootstrap.css" />
    </head>

    <body>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <div class="col-md-2">
                        <label for="label-name" class="control-label">Text Here</label>
                    </div>

                    <div class="col-md-6">
                        <input type="text" class="form-control" id="some-text">
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-group">
                    <div class="col-md-2">
                        <label for="label-name" class="control-label">Text Here</label>
                    </div>

                    <div class="col-md-6">
                         <input type="checkbox">
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-2"></div>

            <div class="col-md-6">
                <button type="button" class="btn btn-default">Run</button>
            </div>
        </div>

        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap.min.js"></script>
    </body>
</html>

创建两个彼此相邻的HTML表单

5 个答案: